एचटीएमएल फाइल

में उपयोग किए गए सभी सीएसएस प्राप्त करना मुझे जावास्क्रिप्ट का उपयोग कर एक HTML फ़ाइल में उपयोग की जाने वाली सभी सीएसएस शैलियों को प्राप्त करना होगा।एचटीएमएल फाइल

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

यदि उपरोक्त कोड मेरा HTML है तो मुझे सिर के अंदर एक जावास्क्रिप्ट फ़ंक्शन लिखना होगा जो इस तरह की स्ट्रिंग देता है।

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

यह करने के लिए संभव है?

स्रोत

2009-11-05 DonX

इनलाइन शैली के लिए, आप सामग्री सामान्य डोम से बाहर किसी भी अन्य तत्वों के साथ की तरह प्राप्त कर सकते हैं:

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

बाहरी, link एड स्टाइलशीट के लिए यह अधिक समस्याग्रस्त है। आधुनिक ब्राउज़रों में, आप document.styleSheets[].cssRules[].cssText संपत्ति से प्रत्येक नियम (इनलाइन, लिंक और @ आयातित स्टाइलशीट सहित) का टेक्स्ट प्राप्त कर सकते हैं।

दुर्भाग्य से आईई इस DOM Level 2 Style/CSS मानक को लागू नहीं करता है, इसके बजाय स्टाइलशीट और सीएसएसआरयूएल इंटरफेस के its own subtly different संस्करण का उपयोग करता है। तो आपको आईई में नियमों को फिर से बनाने के लिए कुछ स्नीफ-एंड-शाखा कोड की आवश्यकता है, और पाठ मूल के समान बिल्कुल नहीं हो सकता है। (विशेष रूप से, आईई अपनी संपत्ति के नाम सभी कैप्स जाएगा और रिक्त स्थान को खो देते हैं।)

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

स्रोत

2009-11-05 10:42:13 bobince

तुम सच में चर sheeti कॉल किया था ?? :) यह वास्तव में एक शीट चर है .. – Faruz

धन्यवाद bobince ... सभी ब्राउज़रों में ठीक काम किया ... – DonX

मुझे निम्न त्रुटि मिलती है: 'TypeError: नल' – starbeamrainbowlabs

यहाँ मेरी समाधान है:

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

यह @ bobince के जवाब पर आधारित है।

यह स्टाइल टैग और बाहरी स्टाइलशीट दोनों से सभी सीएसएस निकालता है।

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

अंत में, cssInline पेज और उनकी सामग्री के सभी steelsheets के लिए पाठ्य सूची है:

स्रोत

2013-10-08 16:35:46 starbeamrainbowlabs

यहाँ मेरी समाधान है।

उदाहरण:

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

स्रोत

2015-07-16 17:03:45 rAthus

एचटीएमएल फाइल

उत्तर

संबंधित मुद्दे