आप जावास्क्रिप्ट के साथ CSS कैसे जोड़ते हैं?

Question

आप strong { color: red }जावास्क्रिप्ट के उपयोग द्वारा CSS नियम (जैसे ) कैसे जोड़ते हैं ?

Comments

एक ही प्रश्न (उत्तर क्रॉसब्रोसर jQuery है) stackoverflow.com/a/266110/341744

— NinMonkey

@monkey: यह एक बहुत ही खराब समाधान है, और वास्तव में वह नहीं है जो यहां पूछा गया था। उदाहरण: यदि <strong>दस्तावेज़ में एक नया तत्व जोड़ा जाता है तो क्या होता है।

— निकफ

Answer 1

आप DOM लेवल 2 CSS इंटरफेस ( MDN ) का उपयोग करके भी ऐसा कर सकते हैं :

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

... सभी पर (स्वाभाविक रूप से) IE8 और पूर्व, जो अपने ही अलग-अलग शब्दों का उपयोग करता है:

sheet.addRule('strong', 'color: red;', -1);

इसमें CreateElement-set-innerHTML विधि की तुलना में एक सैद्धांतिक लाभ है, जिसमें आपको आंतरिक HTML में विशेष HTML वर्ण डालने की चिंता करने की आवश्यकता नहीं है, लेकिन व्यवहार शैली में तत्व HTML में CDATA हैं, और '<' और 'और' का उपयोग शायद ही कभी स्टाइलशीट में किया जाता है।

इससे पहले कि आप इसे इस तरह से जोड़ना शुरू कर सकें, आपको स्टाइलशीट की आवश्यकता है। यह किसी भी मौजूदा सक्रिय स्टाइलशीट हो सकती है: बाहरी, एम्बेडेड या खाली, इससे कोई फर्क नहीं पड़ता। यदि कोई नहीं है, तो इसे बनाने का एकमात्र मानक तरीका createElement है।

Comments

"रंग" .. ओह हाँ, उफ़! शुक्र है कि यह सिर्फ एक उदाहरण था। मुझे संदेह था कि इसके लिए कोई DOM विधि हो सकती है, धन्यवाद! +1

— निकफ

शीट आती है sheet = window.document.styleSheets[0] (आपके पास कम से कम एक <शैली का प्रकार = "पाठ / सीएसएस"> </ शैली> है)।

— एजेपी

धन्यवाद, Google द्वारा दिखाए गए सभी उदाहरण पहले बहुत बड़े हैं, जब मुझे इन दोनों लाइनों पर अपनी स्मृति को ताज़ा करने की आवश्यकता थी।

— ElDoRado1239

मुझे पता है कि यह एक समय हो गया है, लेकिन जब मैंने पहली बार परीक्षण किया, तो मुझे मिलाSecurityError: The operation is insecure.

— user10089632

@ user10089632 जिस स्टाइलशीट को आप एक्सेस कर रहे हैं, उसे होस्ट करने के लिए पैरेंट डॉक्यूमेंट के लिए उसी होस्ट से काम लेना होगा।

— बोबिन्स

Answer 2

styleदस्तावेज़ में एक नया नोड बनाने और जोड़ने के लिए सरल और प्रत्यक्ष दृष्टिकोण है ।

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }

    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Comments

क्या इसे शरीर के बजाय दस्तावेज़ के सिर में जोड़ा नहीं जाना चाहिए?

— 23

@bobince - HTML चश्मे के अनुसार, बिल्कुल, लेकिन सभी ब्राउज़र उन्हें कहीं भी पहचानते हैं। document.bodyटाइप करने के लिए और तेजी से निष्पादित करने के लिए छोटा है document.getElementsByTagName("head")[0]और सम्मिलित करें / addRule के क्रॉस-ब्राउज़र मुद्दों से बचा जाता है।

— बेन ब्लैंक

समाधान एक लंबे "दुहह" द्वारा पीछा किया जाना चाहिए। विश्वास नहीं कर सकता मैं इसके बारे में नहीं सोचा था।

— जॉर्ज मौअर

हाल के सभी ब्राउज़रों में आप बस उपयोग कर सकते हैं document.head.appendChild।

— गजस

यह समाधान कहीं बेहतर है! कल्पना कीजिए कि आपके पास एक से अधिक स्टाइलशीट हैं: @bobince समाधान के साथ आपके नए जोड़े गए सीएसएस को दूसरे / तीसरे / आदि द्वारा अधिलेखित किया जा सकता है। पेज पर स्टाइलशीट। का उपयोग करते हुए document.body.appendChild(css);आप वाकई नई सीएसएस हमेशा पिछले शासन है या नहीं।

— AvL

Answer 3

बेन ब्लैंक द्वारा समाधान मेरे लिए IE8 में काम नहीं करेगा।

हालाँकि इसने IE8 में काम किया

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}

Comments

अच्छा पुराना IE हमेशा जीवन को आसान बनाता है

— एलेक्स डब्ल्यू

यदि आप @ @ -निदेशक, जैसे या , phpied.com/dynamic-script-and-style-elements-in-ie- और stackoverflow करने के लिए अद्यतन देखें, तो आपको सेटिंग करने से head पहले तत्व को जोड़ना चाहिए .cssText, या IE6-8 क्रैश होगा। .com / a / 7952904cssCode@import@font-face

— हान सियोल-ओह

Answer 4

यहां क्रिस हेरिंग के समाधान का थोड़ा अद्यतन संस्करण है , इस बात को ध्यान में रखते हुए कि आप innerHTMLएक नया टेक्स्ट नोड बनाने के बजाय इसका उपयोग कर सकते हैं :

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}

Comments

यदि आप @ @ -निदेशक, जैसे या , phpied.com/dynamic-script-and-style-elements-in-ie- और stackoverflow करने के लिए अद्यतन देखें, तो आपको सेटिंग करने से head पहले तत्व को जोड़ना चाहिए .cssText, या IE6-8 क्रैश होगा। .com / a / 7952904code@import@font-face

— हान सियोल-ओह

Answer 5

सबसे छोटा वन लाइनर

// One liner function:
const addCSS = s =>(d=>{d.head.appendChild(d.createElement("style")).innerHTML=s})(document);

// Usage: 
addCSS("body{ background:red; }")

Answer 6

आप तत्व के आधार पर किसी तत्व पर कक्षाएं या शैली विशेषताएँ जोड़ सकते हैं।

उदाहरण के लिए:

<a name="myelement" onclick="this.style.color='#FF0';">text</a>

जहाँ आप यह कर सकते हैं। style.background, this.style.font- आकार, आदि। आप भी इसी विधि का उपयोग करके एक शैली लागू कर सकते हैं ala

this.className='classname';

यदि आप एक जावास्क्रिप्ट फ़ंक्शन में ऐसा करना चाहते हैं, तो आप 'इस' के बजाय getElementByID का उपयोग कर सकते हैं।

Comments

इवेंट हैंडलर का उपयोग करना इनलाइन जावास्क्रिप्ट एक बहुत बुरा विचार है। आपको अपनी सामग्री को जावास्क्रिप्ट में अपनी कार्यक्षमता और बाध्यकारी घटना संचालकों से अलग करना चाहिए - अधिमानतः एक बाहरी फ़ाइल में।

— कर्नल स्पॉन्ज

Answer 7

<style>Html के सिर में जोड़ने का यह आसान उदाहरण है

var sheet = document.createElement('style');
sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ "table ul {    margin-top: 0 !important;    margin-bottom: 0 !important;}\n"
+ "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n"
+ ".messages.error{display:none !important;}\n"
+ ".messages.status{display:none !important;} ";

document.body.appendChild(sheet); // append in body
document.head.appendChild(sheet); // append in head

स्रोत गतिशील शैली - जावास्क्रिप्ट के साथ सीएसएस में हेरफेर

Answer 8

YUI ने हाल ही में इसके लिए विशेष रूप से एक उपयोगिता जोड़ी है । यहाँ स्टाइलशीट देखें । js

Comments

मैं वर्तमान में अपने काम के लिए YUI का उपयोग कर रहा हूं और यह पता लगाने की कोशिश कर रहा हूं कि मौजूदा सीएसएस नियमों की बाहरी शैली की शीट को कैसे संपादित किया जाए। इस उपयोगिता के बारे में नहीं पता था, यह सही लगता है! धन्यवाद रसेल।

— Jaime

Answer 9

अंतिम स्टाइल शीट सूची के अंत में css नियम जोड़ने का यह मेरा समाधान है:

var css = new function()
{
    function addStyleSheet()
    {
        let head = document.head;
        let style = document.createElement("style");

        head.appendChild(style);
    }

    this.insert = function(rule)
    {
        if(document.styleSheets.length == 0) { addStyleSheet(); }

        let sheet = document.styleSheets[document.styleSheets.length - 1];
        let rules = sheet.rules;

        sheet.insertRule(rule, rules.length);
    }
}

css.insert("body { background-color: red }");

Answer 10

एक अन्य विकल्प तत्व की इन-लाइन शैली संपत्ति को संग्रहीत करने के लिए JQuery का उपयोग करना है, इसे जोड़ना है, और फिर नए मूल्यों के साथ तत्व की शैली संपत्ति को अपडेट करना है। निम्नलिखित नुसार:

function appendCSSToElement(element, CssProperties)
        {
            var existingCSS = $(element).attr("style");

             if(existingCSS == undefined) existingCSS = "";

            $.each(CssProperties, function(key,value)
            {
                existingCSS += " " + key + ": " + value + ";";
            });

            $(element).attr("style", existingCSS);

            return $(element);
        }

और फिर एक ऑब्जेक्ट के रूप में नए सीएसएस विशेषताओं के साथ इसे निष्पादित करें।

appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });

यह आवश्यक रूप से सबसे कुशल तरीका नहीं हो सकता है (मैं इसे सुधारने के सुझावों पर खुला हूं। :)), लेकिन यह निश्चित रूप से काम करता है।

Answer 11

यहां एक नमूना टेम्पलेट शुरू करने में आपकी सहायता करने के लिए है

0 लाइब्रेरी की आवश्यकता है और HTML और CSS दोनों को इंजेक्ट करने के लिए केवल जावास्क्रिप्ट का उपयोग करता है।

फ़ंक्शन को उपयोगकर्ता @Husky के ऊपर से उधार लिया गया था

उपयोगी है यदि आप एक टेम्परॉम्की स्क्रिप्ट चलाना चाहते हैं और एक वेबसाइट पर एक टॉगल ओवरले जोड़ना चाहते हैं (उदाहरण के लिए एक नोट)

// INJECTING THE HTML
document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>';

// CSS INJECTION FUNCTION
///programming/707565/how-do-you-add-css-with-javascript
function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
}

// INJECT THE CSS INTO FUNCTION
// Write the css as you normally would... but treat it as strings and concatenate for multilines
insertCss(
  "#injection {color :red; font-size: 30px;}" +
  "body {background-color: lightblue;}"
)

Answer 12

यदि आपको पता <style>है कि पेज में कम से कम एक टैग मौजूद है, तो इस फ़ंक्शन का उपयोग करें:

CSS=function(i){document.getElementsByTagName('style')[0].innerHTML+=i};

उपयोग:

CSS("div{background:#00F}");

Answer 13

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

function addCssRules(selector, rules, /*Optional*/ sheetName) {
    // We want the last sheet so that rules are not overridden.
    var styleSheet = document.styleSheets[document.styleSheets.length - 1];
    if (sheetName) {
        for (var i in document.styleSheets) {
            if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) {
                styleSheet = document.styleSheets[i];
                break;
            }
        }
    }
    if (typeof styleSheet === 'undefined' || styleSheet === null) {
        var styleElement = document.createElement("style");
        styleElement.type = "text/css";
        document.head.appendChild(styleElement);
        styleSheet = styleElement.sheet;
    }

    if (styleSheet) {
        if (styleSheet.insertRule)
            styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length);
        else if (styleSheet.addRule)
            styleSheet.addRule(selector, rules);
    }
}

Answer 14

.cssJquery में उपयोग करते हैं$('strong').css('background','red');

$('strong').css('background','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong> Example
</strong> 

Comments

जावास्क्रिप्ट, ओपी jQuery के बारे में कुछ भी नहीं कहता है

— agapitocandemor