Uzyskiwanie wszystkich css używanych w pliku html

Muszę uzyskać wszystkie style CSS używane w pliku HTML za pomocą JavaScript.Uzyskiwanie wszystkich css używanych w pliku html

<html> 
    <head> 
     <style type="text/css"> 
      body { 
       border: 1px solid silver; 
      } 
      .mydiv{ 
       color: blue; 
      } 
     </style> 
    </head> 
    <body> 
    </body> 
</html>

Jeżeli powyższy kod jest mój HTML muszę napisać jedną funkcję JavaScript wewnątrz głowicy, która zwraca ciąg takiego.

body { 
    border: 1px solid silver; 
} 
.mydiv { 
    color: blue; 
}

Czy można to zrobić?

Źródło

2009-11-05 DonX

Dla stylów inline, można uzyskać zawartość z normalnym DOM jak w przypadku każdego innego elementu:

document.getElementsByTagName('style')[0].firstChild.data

Dla zewnętrznych, link ed stylów jest bardziej problematyczne. W nowoczesnych przeglądarkach możesz uzyskać tekst każdej reguły (w tym wstawiane, połączone i przydane arkusze stylów) z właściwości document.styleSheets[].cssRules[].cssText.

Niestety, IE nie implementuje tego standardu DOM Level 2 Style/CSS, zamiast tego używa wersji its own subtly different interfejsu StyleSheet i CSSRule. Potrzebujesz więc kodu odszukiwania reguł w IE, a tekst może nie być dokładnie taki sam jak oryginał. (W szczególności, IE ALL-CAPS swoje nazwy właściwości i stracić spacje.)

var css= []; 

for (var sheeti= 0; sheeti<document.styleSheets.length; sheeti++) { 
    var sheet= document.styleSheets[sheeti]; 
    var rules= ('cssRules' in sheet)? sheet.cssRules : sheet.rules; 
    for (var rulei= 0; rulei<rules.length; rulei++) { 
     var rule= rules[rulei]; 
     if ('cssText' in rule) 
      css.push(rule.cssText); 
     else 
      css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n'); 
    } 
} 

return css.join('\n');

Źródło

2009-11-05 10:42:13 bobince

Czy naprawdę nazywać zmienne sheeti ?? :) To jest rzeczywiście zmienna sheeti .. – Faruz

Dzięki bobince ... Dobrze działa we wszystkich przeglądarkach ... – DonX

Pojawia się następujący błąd: 'TypeError: Nie można odczytać właściwości 'length' of null' – starbeamrainbowlabs

Oto moje rozwiązanie:

function getallcss() { 
    var css = "", //variable to hold all the css that we extract 
     styletags = document.getElementsByTagName("style"); 

    //loop over all the style tags 
    for(var i = 0; i < styletags.length; i++) 
    { 
     css += styletags[i].innerHTML; //extract the css in the current style tag 
    } 

    var currentsheet = false;//initialise a variable to hold a reference to the stylesheet we are currently extracting from 
    //loop over all the external stylesheets 
    for(var i = 0; i < document.styleSheets.lenngth; i++) 
    { 
     currentsheet = document.styleSheets[i]; 
     //loop over all the styling rules in this external stylesheet 
     for(var e = 0; e , currentsheet.cssRules.length; e++) 
     { 
      css += currentsheet.cssRules[e].cssText; //extract all the styling rules 
     } 
    } 

    return css; 
}

Jest on oparty na odpowiedź @ bobince użytkownika.

Wyodrębnia wszystkie css z tagów stylu i zewnętrznych arkuszy stylów.

Źródło

2013-10-08 16:35:46 starbeamrainbowlabs

Oto moje rozwiązanie:

var css = []; 
for (var i=0; i<document.styleSheets.length; i++) 
{ 
    var sheet = document.styleSheets[i]; 
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules; 
    if (rules) 
    { 
     css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */'); 
     for (var j=0; j<rules.length; j++) 
     { 
      var rule = rules[j]; 
      if ('cssText' in rule) 
       css.push(rule.cssText); 
      else 
       css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n'); 
     } 
    } 
} 
var cssInline = css.join('\n')+'\n';

W końcu cssInline jest tekstową listę wszystkich steelsheets strony i ich zawartość.

Przykład:

/* Stylesheet : http://example.com/cache/css/javascript.css */ 
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); } 
.javascript { color: rgb(172, 172, 172); } 
.javascript .imp { font-weight: bold; color: red; } 

/* Stylesheet : http://example.com/i/main_master.css */ 
html { } 
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); } 
a { color: rgb(204, 0, 51); text-decoration: none; } 
a:hover { color: rgb(153, 153, 153); text-decoration: none; } 
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; } 
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); } 
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; } 
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); } 
#header a { color: rgb(255, 255, 255); } 
#menu_2 { height: 290px; } 

/* Stylesheet : [inline styles] */ 
.hidden { display: none; }

Źródło

2015-07-16 17:03:45 rAthus

Uzyskiwanie wszystkich css używanych w pliku html

Odpowiedz

Powiązane problemy