utilisé dans le fichier css html

Question

Je dois obtenir ce que sont tous les styles CSS utilisés dans un fichier HTML en utilisant JavaScript. Si le code ci-dessus est mon code HTML, je dois écrire une fonction JavaScript dans la tête qui renvoie une chaîne comme celle-ci.

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

Est-il possible de faire?

Answer 1

Pour les feuilles de style inline, vous pouvez obtenir le contenu de la DOM normale comme avec tout autre élément:

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

Pour externes, link ed il est plus stylesheets problématique. Dans les navigateurs modernes, vous pouvez obtenir le texte de chaque règle (y compris les feuilles de style inline, linked et @ import) à partir de la propriété document.styleSheets[].cssRules[].cssText.

Malheureusement, IE n'implémente pas cette norme DOM Level 2 Style/CSS, mais utilise plutôt la version its own subtly different des interfaces StyleSheet et CSSRule. Vous avez donc besoin d'un code sniff-and-branch pour recréer des règles dans IE, et le texte peut ne pas être exactement identique à l'original. (En particulier, IE ALL-CAPS vos noms de propriétés et de perdre les espaces.)

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'); 

Answer 2

Voici ma solution:

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

Il est basé sur la réponse de @ bobince.

Il extrait tous les css des deux balises de style et les feuilles de style externes.

Answer 3

Voici ma solution:

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

En fin de compte, cssInline est une liste textuelle de tous les steelsheets de la page et leur contenu.

Exemple:

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