Как получить все CSS элемента

Я тестировал функции JavaScript Javascript сегодня и заметил, что когда используется .style.cssText, он дает мне только CSS, который я установил с помощью JS.Как получить все CSS элемента

Я хотел бы получить все CSS для элементов, поэтому я предполагаю, что я делаю что-то неправильно или, возможно, нуждаюсь в другой функции вместо getComputedStyle, но для всего CSS, а не для значений одного свойства, но я не могу найти то, что я требуется при поиске.

Так что мой вопрос, как я могу получить полный CSS от последней части моего кода, как:

background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;

вместо текущей короткой CSS, который выводится?

<html> 
<head> 

<style type="text/css" media="screen"> 
    .MyDiv001 { 
     background-color: #ffcccc; 
     font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; 
    } 
    .MyDiv002 { 
     background-color: #ccffcc; 
     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    } 
</style> 

</head> 

<body> 

<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div> 
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div> 
<br /><hr><br /> 

<script type="text/javascript"> 

// Select the MyDiv001 element 
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001 

// Set some style property values for MyDiv001 
MyDiv001.style.setProperty("font-size", "13px", null); 
MyDiv001.style.setProperty("color", "#ff0000", null); 

// Get the Computed Style for MyDiv001 
var MyDiv001Style = window.getComputedStyle(MyDiv001); 

// Show the MyDiv001 style property values 
document.write("MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />"); 
document.write("MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />"); 
document.write("MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />"); 

// Select the MyDiv002 element 
var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002 

// Set some style property values for MyDiv002 
MyDiv002.style.setProperty("font-size", "16px", null); 
MyDiv002.style.setProperty("color", "#0000ff", null); 

// Get the Computed Style for MyDiv002 
var MyDiv002Style = window.getComputedStyle(MyDiv002); 

// Show the MyDiv002 style property values 
document.write("MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "<br />"); 
document.write("MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />"); 
document.write("MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />"); 

// Not what i was expecting 
document.write("MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css? 
document.write("MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css? 

</script> 

</body> 
</html>

Edit - Я хотел бы ответ, который использует регулярные Javascript, если это возможно, мы надеемся на исправленную версию моего кода и причину, почему она не возвращает полный CSS, спасибо.

источник

2013-02-21 zeddex

возможно дубликат [Может JQuery получить все стили CSS, связанные с элементом?] (Http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with -an-element) –

Нет, это не так, используя jQuery, в то время как у меня есть обычный JS в приведенном выше коде. Я также хочу узнать, что я сделал неправильно, поэтому я знаю, почему он не возвращает все элементы CSS обратно. – zeddex

Нашел статью http://www.quirksmode.org/dom/getstyles.html - Я не эксперт по js, но кажется довольно прямым. – ggdx

MyDiv001.style.cssText вернет только встроенные стили, которые были установлены атрибутом или свойством style.

Вы можете использовать getComputedStyle для извлечения всех стилей, применяемых к элементу. Вы можете перебирать возвращаемый объект, чтобы сбрасывать все стили.

function dumpCSSText(element){ 
    var s = ''; 
    var o = getComputedStyle(element); 
    for(var i = 0; i < o.length; i++){ 
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';'; 
    } 
    return s; 
}

источник

2013-02-21 20:15:53

Это отлично подходит для получения полного стиля. Мне все еще интересно узнать, почему мой код не работает, но это в основном сортирует то, что я пытался сделать, большое спасибо. – zeddex

Из MDC: [element.style] (https://developer.mozilla.org/en-US/docs/DOM/element.style) не является полезным для изучения стиля элемента в целом, поскольку он представляет только CSS объявления, установленные в атрибуте inline 'style' элемента, а не те, которые исходят из правил стиля в другом месте, таких как правила стиля в разделе' 'или внешние таблицы стилей. –

Как получить все CSS элемента

ответ

Смежные вопросы