Jak zdobyć wszystkie CSS elementu

Testowałem funkcje JavaScript CSS już dziś i zauważyłem, że gdy używany jest .style.cssText, to daje mi tylko CSS ustawiony z JS.Jak zdobyć wszystkie CSS elementu

Zamiast tego chciałem uzyskać wszystkie elementy CSS dla elementów, więc domyślam się, że robię coś złego lub może potrzebuję innej funkcji zamiast jak getComputedStyle, ale dla całego CSS zamiast pojedynczych wartości właściwości, ale nie mogę znaleźć tego, co potrzeba podczas wyszukiwania.

Więc moje pytanie brzmi: w jaki sposób można uzyskać pełny CSS z ostatniej części mojego kodu, takich jak:

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

zamiast obecnego krótszym CSS, który jest wyjście?

<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 - Chciałbym odpowiedzi, który używa Javascript regularne, jeśli to możliwe, miejmy nadzieję ustaloną wersję mojego kodu i powód dlaczego nie zwraca pełną CSS, dzięki.

Źródło

2013-02-21 zeddex

możliwe duplikat [jQuery można uzyskać wszystkie style CSS skojarzone z elementem?] (Http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with -an-element) –

Nie, to nie jest, to za pomocą jQuery, a ja mam regularny JS w powyższym kodzie. Chcę również dowiedzieć się, co zrobiłem źle, więc wiem, dlaczego nie przywraca wszystkich elementów CSS. – zeddex

Znalazłem artykuł http://www.quirksmode.org/dom/getstyles.html - Nie jestem ekspertem od js ale wydaje się dość prosty – ggdx

MyDiv001.style.cssText zwróci tylko style śródliniowe, które zostały ustawione przez atrybut lub właściwość style.

Możesz użyć getComputedStyle, aby pobrać wszystkie style zastosowane do elementu. Możesz wykonać iterację nad zwróconym obiektem, aby zrzucić wszystkie style.

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; 
}

Źródło

2013-02-21 20:15:53

To działa doskonale, aby uzyskać pełny styl. Nadal jestem zainteresowany wiedząc, dlaczego mój kod nie działa, ale to w zasadzie sortuje to, co próbowałem zrobić, wielkie dzięki. – zeddex

Z MDC: [element.style] (https://developer.mozilla.org/en-US/docs/DOM/element.style) nie przydaje się do ogólnego poznania stylu elementu, ponieważ reprezentuje tylko CSS deklaracje są ustawiane w wewnętrznym atrybucie "style" elementu, a nie w stylu, który pochodzi z innych reguł stylu, takich jak reguły stylu w sekcji "" lub zewnętrzne arkusze stylów. –

Jak zdobyć wszystkie CSS elementu

Odpowiedz

Powiązane problemy