जावास्क्रिप्ट के साथ <स्टाइल> टैग कैसे बनाएं?

336

मैं <style>जावास्क्रिप्ट के साथ एक HTML पृष्ठ में एक टैग सम्मिलित करने का एक तरीका ढूंढ रहा हूं ।

मुझे अब तक का सबसे अच्छा तरीका:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

यह फ़ायरफ़ॉक्स, ओपेरा और इंटरनेट एक्सप्लोरर में काम करता है लेकिन Google क्रोम में नहीं। यह भी <br>IE के लिए सामने के साथ थोड़ा बदसूरत है ।

क्या कोई <style>टैग बनाने का तरीका जानता है जो

अच्छा है
क्रोम के साथ काम करता है?

या हो सकता है

यह एक गैर-मानक चीज है जिससे मुझे बचना चाहिए
तीन काम करने वाले ब्राउज़र महान हैं और वैसे भी क्रोम का उपयोग कौन करता है?

javascript html css

— अमीना सना
स्रोत

663

styleतत्व को जोड़ने की headबजाय करने की कोशिश करें body।

यह IE (7-9), फ़ायरफ़ॉक्स, ओपेरा और क्रोम में परीक्षण किया गया था:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

— क्रिस्टोफ
स्रोत

19

FYI करें, document.headसभी प्रमुख ब्राउज़रों में समर्थित है।

— रोब डब्ल्यू

30

@ रॉब - यह IE8 और नीचे में समर्थित नहीं है। यह आधुनिक ब्राउज़रों में समर्थित है, लेकिन सभी प्रमुख नहीं हैं।

— टिम

5

सिर्फ उपयोग क्यों नहीं document.querySelector("head")? यह IE8 स्रोत

— allenhwkim

8

@allenhwkim: उत्तर परिचय की भविष्यवाणी करता है querySelector(); आज, मैं शायद साथ जाऊंगा document.head, IE9 के बाद से उपलब्ध

— क्रिस्टोफ़

2

मुझे पहुंचने से पहले स्टाइल तत्व को सिर पर जोड़ना था style.styleSheet.cssText। इससे पहले कि यह जोड़ा style.styleSheetगया था अशक्त था।

— हॉकर

38

यहां एक स्क्रिप्ट है जो IE- शैली createStyleSheet()और addRule()ब्राउज़रों के तरीकों को जोड़ता है जो उनके पास नहीं हैं:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

आप के माध्यम से बाहरी फ़ाइलों को जोड़ सकते हैं

document.createStyleSheet('foo.css');

और गतिशील रूप से नियम बनाएं

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');

— क्रिस्टोफ
स्रोत

यह एक अजीब सीएमएस संदर्भ में एक बाहरी सीएसएस फ़ाइल को लोड करने की कोशिश में मेरे लिए बहुत मददगार था। मैं addRule / removeRule भाग के साथ कुछ परेशानी में चला गया था, इसलिए मैंने उन लोगों को समाप्त कर दिया, और सब कुछ ठीक काम करता है।

— कर्कमन १४

33

मैं मान रहा हूं कि आप एक styleटैग बनाम एक linkटैग (बाहरी सीएसएस का संदर्भ) डालना चाहते हैं, इसलिए यह निम्न उदाहरण है:

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

इसके अलावा, मैंने आपके प्रश्न पर ध्यान दिया जो आप उपयोग कर रहे हैं innerHTML । यह वास्तव में एक पेज में डेटा डालने का एक गैर-मानक तरीका है। सबसे अच्छा अभ्यास एक पाठ नोड बनाना है और इसे दूसरे तत्व नोड में जोड़ना है।

आपके अंतिम प्रश्न के संबंध में, आप कुछ लोगों को कहते सुनाई देंगे कि आपका काम सभी ब्राउज़रों में काम करना चाहिए। यह सब आपके दर्शकों पर निर्भर करता है। यदि आपके दर्शकों में से कोई भी क्रोम का उपयोग नहीं कर रहा है, तो इसे पसीना न करें; हालाँकि, यदि आप संभवत: सबसे बड़े दर्शकों तक पहुँचना चाहते हैं, तो सभी प्रमुख ए-ग्रेड ब्राउज़रों का समर्थन करना सबसे अच्छा है

— टॉम
स्रोत

1

यह मूल रूप से मेरे समाधान के समान है; उनमें से कोई भी IE में काम नहीं करता है!

— क्रिस्टोफ

IE में एक पाठ नोड लागू करने से काम नहीं करता है। लेकिन स्टाइल तत्व को सिर में लगाने से मेरा समाधान क्रोम में काम करता है! :-)

1

IE के लिए, उपयोगstyleNode.styleSheet.cssText = ...

— क्रिस्टोफ

7

(बहुत देर से टिप्पणी) "यह सब अपने दर्शकों पर निर्भर करता है। अपने दर्शकों में कोई भी क्रोम का उपयोग कर रही है तो पसीना नहीं आता यह" यह रवैया क्या लोगों के लिए सुराग के लिए IE6 में बंद कर दिया जा रहा है साल के बाद IE7 और भी IE8 उपलब्ध हैं । "लेकिन वेब एप्लिकेशन मुझे केवल IE6 में काम करना है"

— स्टीफन पी

1

हां, आप सही हैं और मैं जरूरी नहीं कर रहा हूं कि या तो (इसलिए पूरे: "यदि आप संभव सबसे बड़े दर्शकों तक पहुंचने के लिए देख रहे हैं, तो सभी प्रमुख ए-ग्रेड ब्राउज़रों का समर्थन करना सबसे अच्छा है") लेकिन जानना आपके प्लेटफ़ॉर्म के लिए ऑडियंस महत्वपूर्ण है।

— टॉम

31

<style>टैग <head>तत्व के भीतर जगह होनी चाहिए , और प्रत्येक जोड़े गए टैग को टैग के नीचे जोड़ा जाना चाहिए <head>।

डॉक्यूमेंट हेड टैग में स्टाइल टैग को इंजेक्ट करने के लिए InsertAdjacentHTML का उपयोग करना :

मूल डोम:

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

स्निपेट का विस्तार करें

jQuery :

$('<style>').text("body{background:red}").appendTo(document.head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

स्निपेट का विस्तार करें

— vsync
स्रोत

सहमत, यह सबसे अच्छा और सरल है लेकिन बुरी तरह से इंजेक्शन सीएसएस के लिए बाहर देखो अगर तुम इस पर नियंत्रण में नहीं थे!

— अंतहीन

24

एक उदाहरण जो सभी ब्राउज़रों के साथ काम करता है और अनुपालन करता है:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

— BELAZ
स्रोत

7

गलत तत्व: styleकोई विशेषता relया hrefविशेषता नहीं है - क्या आपका मतलब है link?

— क्रिस्टोफ

4

linkप्रश्न के साथ तत्व का क्या करना है? ओपी ने styleतत्व के लिए कहा । इस जवाब का सवाल से कोई लेना-देना नहीं है

— vsync

2

@vsync styleइनलाइन शैलियों को जोड़ने के लिए है, linkस्टाइलशीट स्रोतों के लिए सही है और इससे क्रॉस-ब्राउज़र समस्याओं से बचने का लाभ है।

— माजिक

7

अक्सर मौजूदा नियमों को ओवरराइड करने की आवश्यकता होती है, इसलिए HEAD में नई शैलियों को जोड़ना हर मामले में काम नहीं करता है।

मैं इस सरल फ़ंक्शन के साथ आया था जो सभी " वैध बॉडी के दृष्टिकोण" को संक्षेप में प्रस्तुत करता है और उपयोग करने के लिए और सुविधाजनक है (IE8 +)।

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

डेमो: कोडपेन , jsfiddle

— Garlaro
स्रोत

पूरी तरह से नवीनतम फ़ायरफ़ॉक्स, क्रोम, और ie8 में काम किया है (या कम से कम जिस तरह से मैंने इसे टाइप किया है)। मैं वास्तव में नहीं जानता कि यह अधिक अंक क्यों नहीं है।

— हैरी पेहोनेन

इसके पास और अधिक अंक नहीं हैं, क्योंकि यह वैध नहीं है, न ही <style>बाहर <head>टैग को टैग करने के लिए अच्छी बात है । स्टाइल टैग कहीं और नहीं बल्कि <head>टैग के भीतर दिखाई देना चाहिए । यह व्यापक रूप से अपनाया गया HTML मानक है। इनलाइन स्टाइलिंग के लिए शैली विशेषता है और शैली विशेषता को टैग के भीतर किसी भी टैग पर लागू किया जा सकता है <body>, जिसमें <body>यह स्वयं टैग भी शामिल है ।

— डरावना

इस कोड ने मेरे लिए काम नहीं किया। मैंने कुछ बहुत छोटे कोड तैयार किए हैं जो तीन ब्राउज़रों में काम करते हैं और यहाँ अपना उत्तर देंगे।

— डेविड स्पेक्टर

मैं यह पता नहीं लगा सका कि जब मैंने डायनेमिक रूप से हेड में स्टाइल ब्लॉक जोड़ा था तो क्रोम मेरी शैलियों को अपडेट क्यों नहीं कर रहा था। मैंने यह कोशिश की और जादुई रूप से यह अद्यतन करता है। मुझे यह जांचने की आवश्यकता है कि इस कोड में वास्तव में यहां क्या अंतर है जो सीएसएस को फिर से प्रस्तुत करने के लिए ब्राउज़र को ट्रिगर करता है। लेकिन, बड़ा धन्यवाद!

— प्राग्रामर

5

यह ऑब्जेक्ट वेरिएबल टाइप टैग के साथ हेड टैग में स्टाइल टैग को जोड़ देगा और हर एक आईडी / क्लास / एलिमेंट से मेल खाता है। कंटेंट प्रॉपर्टी को संशोधित करने और आवश्यकतानुसार कई नियमों को इंजेक्ट करने के लिए स्वतंत्र महसूस करें । बस यह सुनिश्चित करें कि सामग्री के अंदर सीएसएस नियम एक पंक्ति में रहें (या यदि आप चाहें तो प्रत्येक नई पंक्ति से बच सकते हैं)।

var script = {

  type: 'text/css', style: document.createElement('style'), 
  content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
  append: function() {

    this.style.type = this.type;
    this.style.appendChild(document.createTextNode(this.content));
    document.head.appendChild(this.style);

}}; script.append();

— डरावना
स्रोत

1

मुझे यह समाधान पसंद आया, इसलिए मैंने इसे स्वयं मोबाइल उपकरणों पर बटन आकार बदलने के लिए उपयोग किया, लेकिन यह गलत है कि सामग्री संपत्ति को एक पंक्ति में होना चाहिए: बस + ऑपरेटर के साथ कई स्ट्रिंग्स (कई लाइनों पर) को संक्षिप्त करें।

— 21

सच। मुझे पता है और मुझे पता था। लेकिन, कभी-कभी, मैं लिखने के लिए बहुत आलसी हूं जैसा कि मुझे माना जाता है। : डी चियर्स।

— डरावना

5

यहाँ गतिशील रूप से एक वर्ग जोड़ने के लिए एक संस्करण है

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
}

— माइकल
स्रोत

4

सभी अच्छे हैं, लेकिन javascipt द्वारा बनाए गए नोड के साथ IE6 में काम करने के लिए styleNode.cssText के लिए, आपको cssText सेट करने से पहले दस्तावेज़ को नोड को संलग्न करना होगा;

अधिक जानकारी @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29/aspx

— टोनी
स्रोत

4

जब भी आप appendStyleइस तरह से फ़ंक्शन को कॉल करेंगे तो यह फ़ंक्शन सीएसएस इंजेक्ट करेगा :
appendStyle('css you want to inject')

यह styleदस्तावेज़ के प्रमुख में एक नोड को इंजेक्ट करके काम करता है । यह एक ऐसी ही तकनीक है जो आमतौर पर जावास्क्रिप्ट को लोड करने के लिए प्रयोग की जाती है। यह अधिकांश आधुनिक ब्राउज़रों में लगातार काम करता है।

appendStyle = function (content) {
  style = document.createElement('STYLE');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(content));
  document.head.appendChild(style);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button>
</body>

</html>

स्निपेट का विस्तार करें

आप निम्न स्निपेट का उपयोग करके बाहरी CSS फाइलों को आलसी लोड कर सकते हैं:

appendExternalStyle = function (content) {
  link = document.createElement('LINK');
  link.rel = 'stylesheet';
  link.href = content;
  link.type = 'text/css';
  document.head.appendChild(link);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html {
      font-family: sans-serif;
      font-display: swap;
    }
  </style>
</head>

<body>

  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

स्निपेट का विस्तार करें

— जोएल एलिस
स्रोत

यह मोटे तौर पर दृष्टिकोण है जिसे मैंने स्वतंत्र रूप से विकसित किया है। लघु और प्यारी और नवीनतम फ़ायरफ़ॉक्स, माइक्रोसॉफ्ट एज, और क्रोम ब्राउज़र में काम करता है। निश्चित रूप से, इंटरनेट एक्सप्लोरर में बहुत सारी जावास्क्रिप्ट त्रुटियां हैं जिनके बारे में चिंता करने के लिए इसे ब्राउज़र संगतता में शामिल किया गया है।

— डेविड स्पेक्टर

3

आप ने लिखा:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

यह क्यों नहीं?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

इसके बाद आप सीएसएस नियमों को आसानी से HTML कोड में जोड़ सकते हैं:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

... या सीधे DOM पर:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

मुझे उम्मीद है कि यह पुरातन ब्राउज़रों को छोड़कर हर जगह काम करेगा।

वर्ष 2019 में निश्चित रूप से क्रोम में काम करता है ।

— 7vujy0f0hy
स्रोत

3

document.head.innerHTML += `
  <style>
    h1 {
      color: red; 
    }
    p {
      color: blue;
    }
  </style>`

<h1>I'm red!</h1>
<p>I'm blue!</p>

स्निपेट का विस्तार करें

अब तक का सबसे सीधा समाधान। आपको बस इतना ही लिखना है कि आप आम तौर styleपर बैकटिक्स के बीच टैग कैसे घोषित करेंगे

— कबिर सिंह साहनी
स्रोत

1

नमस्ते और साइट पर आपका स्वागत है। जबकि यह कोड दी गई समस्या को हल कर सकता है, आपको यह भी स्पष्टीकरण देना चाहिए कि यह कैसे और क्यों काम करता है।

— रेडियोडफ

1

यदि आप जिस समस्या का सामना कर रहे हैं, वह पृष्ठ में CSS की एक स्ट्रिंग को इंजेक्ट कर रहा है, तो यह <link>तत्व की तुलना में <style>तत्व के साथ ऐसा करना आसान है ।

निम्नलिखित p { color: green; }पेज पर नियम जोड़ता है ।

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

आप इसे सीएसएस के अपने स्ट्रिंग एन्कोडिंग द्वारा URL में बना सकते हैं और इसे HREFविशेषता जोड़ सकते हैं । <style>तत्वों के सभी quirks या सीधे पहुंचने वाले स्टाइलशीट की तुलना में बहुत सरल ।

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

यह IE 5.5 में ऊपर की ओर काम करेगा

— moefinley
स्रोत

स्टाइल ब्लॉक को गतिशील रूप से सिर में इंजेक्ट करना कुछ मामलों में स्टाइल को अपडेट नहीं करता है। हालांकि यह काम करता है!

— प्राग्रामर

-1

this link may helpful to you:

http://jonraasch.com/blog/javascript-style-node

— विनोद पोरमा
स्रोत

कृपया एक छोटे पैराग्राफ के लिए पूर्वनिर्मित पाठ / कोड ब्लॉक का उपयोग न करें। इस तरह एक उत्तर के लिए लिंक करना भी बेकार है। कृपया पहले वेबसाइट को सारांशित करें।

— फ्राइंगगपन्नन