रनटाइम पर jQuery के साथ एक सीएसएस नियम / वर्ग बनाएँ

Question

आमतौर पर मेरे पास CSS फ़ाइल होती है जिसमें निम्नलिखित नियम होते हैं:

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

मैं शरीर को रनटाइम क्रियाओं के दौरान सीएसएस जानकारी या ऐसी ही कुछ चीज़ों को जोड़कर ऐसी स्थिर सीएसएस फ़ाइल बनाने से कैसे बच सकता हूँ? (केवल jQuery का उपयोग करके)

मैं इसे एक बार परिभाषित करना चाहता हूं लेकिन jQuery के साथ और बाद में कई बार इसका उपयोग करता हूं; इसलिए मैं इसे हर बार विशिष्ट DOM तत्वों में जोड़ना नहीं चाहता।

मैं सरल विशेषताओं ( css("attr1", "value");) को जानता हूं , लेकिन मैं एक पूर्ण पुन: प्रयोज्य सीएसएस नियम कैसे बना सकता हूं?

Answer 1

आप शैली तत्व बना सकते हैं और इसे DOM में सम्मिलित कर सकते हैं

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

ओपेरा 10 FF3.5 iE8 iE6 पर परीक्षण किया गया

Comments

जीआईटी आत्मनिर्भर है। आप इसे स्थानीय स्तर पर बना सकते हैं, और यह ठीक काम करेगा। डाउनलोड लिंक के लिए सीधा लिंक: gist.github.com/gists/714352/download

— डैनियल रिबेरो

कोई दिक्कत नहीं है। कभी-कभी यह jQuery के मामूली संस्करण बग, या सिर्फ एक गलत सेटअप हो सकता है। जेएस ऐप्स के साथ सौदा यह है: यदि वे काम नहीं करते हैं, तो वे बस काम नहीं करते हैं। कोई क्षमा नहीं।

— डैनियल रिबेरो

IE8 में मेरे लिए एक ' अनपेक्षित कॉल टू मेथड या प्रॉपर्टी ऐक्सेस ' एरर फेंकता है । मुझे यह काम करने के लिए इस लेख का पालन करना पड़ा ।

— ब्रैंडन बून

IE9 में पेज की केवल 31 शैलियाँ हो सकती हैं- blogs.msdn.com/b/ieinternals/archive/2011/05/14/…

— IvanH

अगर यह काम नहीं करता है। करने के लिए शैली की कोशिश करो body। यानी$("<style>...</style>").appendTo("body");

— inDream

Answer 2

केवल

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

पीछे के स्लैश को नोटिस किया? वे नई लाइनों पर आने वाले तार में शामिल होने के लिए उपयोग किए जाते हैं। उन्हें छोड़ने से एक त्रुटि उत्पन्न होती है।

Comments

यह। स्वीकृत उत्तर होना चाहिए। यह वास्तव में सवाल का जवाब देता है।

— जोहान्स पिल्ले

मैं @ जोहान्सपिल के साथ सहमत हूं, यह असली जवाब है!

— बायू

कॉर्डोवा आईओएस में काम नहीं कर रहा है। क्या आप कृपया इस पर सुझाव देंगे?

— रामगर्ग

काफी कुशल और सीधा। एक बार हेडर में नया नियम इंजेक्ट होने के बाद, आप इसे अपने पेज में कहीं भी पुनः प्राप्त कर सकते हैं, जिसमें पीएचपी भी शामिल है।

— ब्राइस Coustillas

समान रूप से stackoverflow.com/questions/1720320/…

— user1742529

Answer 3

आप एक वस्तु सीएसएस लागू कर सकते हैं। तो आप इस तरह से अपनी वस्तु को अपनी जावास्क्रिप्ट में परिभाषित कर सकते हैं:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

और फिर बस इसे उन सभी तत्वों पर लागू करें जो आप चाहते हैं

$("#myelement").css(my_css_class);

तो यह पुन: प्रयोज्य है। हालांकि आप किस उद्देश्य से ऐसा करेंगे?

Comments

मैं कहूंगा कि यह एक सीएसएस नियम है न कि सीएसएस वर्ग।

— हिप्पिट्रैइल

यह उत्तर भ्रामक है। पूछने वाला रनटाइम पर एक सीएसएस नियम बनाना चाहता था, किसी विशेष तत्व की शैली को एक स्थिर (पुन: प्रयोज्य) सीएसएस घोषणा में सेट नहीं करना चाहता था।

— डैन डस्केल्सस्कु

यह काफी नहीं है कि उन्होंने क्या मांगा, लेकिन यह सही समाधान है :) डोम को अतिरिक्त <स्टाइल> तत्वों से भरना कुछ बुरा गंध है

— केविन

जरूरत पड़ने पर लागू किए गए इन नियमों को आप कैसे हटाएंगे, यह अन्य समाधानों के साथ संभव है ...

— विश्वनाथ

@ केविन - ऐसा हो सकता है लेकिन कई बार ऐसा होता है जब आपको बस वही चाहिए होता है। उदाहरण के लिए - जब किसी तत्व को कुछ अजाक्स लिपि द्वारा फिर से बनाया जा रहा है और आपको एक नई शैली नियम जारी रखने की आवश्यकता है।

— बिलीनोआह

Answer 4

यदि आप डॉटरो के अनुसार IE <9 का समर्थन करने की आवश्यकता नहीं है, तो आप सम्मिलन का उपयोग कर सकते हैं । वहाँ पर भी क्रॉस ब्राउज़र कोड का एक सा है।

document.styleSheets[0].insertRule('#my-window {\
    position: fixed;\
    z-index: 102;\
    display:none;\
    top:50%;\
    left:50%;\
}', 0)

Answer 5

यहाँ एक jquery प्लगइन है जो आपको CSS को इंजेक्ट करने की अनुमति देता है:

https://github.com/kajic/jquery-injectCSS

उदाहरण:

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

Answer 6

यह कुछ अन्य उत्तरों की तुलना में कुछ भी नया नहीं है क्योंकि यह यहाँ और यहाँ वर्णित अवधारणा का उपयोग करता है , लेकिन मैं JSON- शैली की घोषणा का उपयोग करना चाहता था:

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

उपयोग:

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

मुझे यकीन नहीं है कि यह सीएसएस की सभी क्षमताओं को कवर करता है, लेकिन अभी तक यह मेरे लिए काम करता है। यदि ऐसा नहीं है, तो इसे अपनी जरूरतों के लिए शुरुआती बिंदु मानें। :)

Answer 7

यदि आप CSS को CSS ब्लॉक / फ़ाइल में हार्डकोड नहीं करना चाहते हैं, तो आप jQuery का उपयोग गतिशील रूप से CSS को एचटीएमएल एलिमेंट्स, आईडी और क्लास में जोड़ने के लिए कर सकते हैं।

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

Comments

यह जवाब काफी नहीं है कि पूछने वाले ने क्या पूछा। पूछने वाला रनटाइम पर एक सीएसएस नियम बनाना चाहता था, किसी विशेष तत्व की शैली को एक निरंतर सीएसएस घोषणा में सेट नहीं करना चाहता था।

— डैन डस्केल्सस्कु

मैं समझता हूं, लेकिन यह एक वैकल्पिक समाधान है, इसलिए मैंने इसे प्रदान किया।

— माइक ट्रम्पिक

@MikeTrpcic समस्या यह है कि इस समाधान को खोजने के लिए अन्य लोग भी हैं - एक पृष्ठ पर सीएसएस नियम जोड़ने के लिए - और आपका उत्तर हल नहीं करता है।

— नैट

Answer 8

यदि आप एक jQuery विजेट बनाते हैं, तो कस्टम नियमों को जोड़ना उपयोगी होता है, जैसे कि कस्टम CSS की आवश्यकता होती है (जैसे कि मौजूदा jQueryUI सीएसएस ढांचे को आपके अन्य विजेट के लिए विस्तारित करना)। यह समाधान तारास के उत्तर (ऊपर वाला पहला) पर बनाता है।

मान लें कि आपके HTML मार्कअप में "Addrule" की आईडी के साथ एक बटन है और कुछ के साथ "लक्ष्य" की आईडी के साथ एक div है:

jQuery कोड:

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type='text/css'> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

इस दृष्टिकोण का लाभ यह है कि आप अपने कोड में परिवर्तनशील नियमों में जोड़ने या घटाने के लिए परिवर्तनशील चर का पुन: उपयोग कर सकते हैं। यदि cssrules एक स्थायी ऑब्जेक्ट में स्थित है जैसे कि jQuery विजेट आपके पास काम करने के लिए लगातार स्थानीय चर है।

Comments

कितना अच्छा विचार है! मैंने इस पृष्ठ पर स्निपेट के साथ संयोजन के रूप में इसका उपयोग किया था ssdtutorials.com/tutorials/title/jquery-flashing-text.html एक रंग को टॉगल करने की अनुमति देने के लिए (मूल केवल एक वर्ग को टॉगल करेगा)। धन्यवाद!

— bgmCoder

Answer 9

ध्यान दें कि jQuery().css() स्टाइलशीट नियमों को नहीं बदलता है, यह सिर्फ प्रत्येक मिलान किए गए तत्व की शैली को बदलता है।

इसके बजाय, यहाँ एक जावास्क्रिप्ट फ़ंक्शन है, जिसे मैंने खुद स्टाइलशीट नियमों को संशोधित करने के लिए लिखा था।

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
        }
    }

लाभ:

• <head>DOM तत्वों के बनने से पहले स्टाइल्स की गणना एक स्क्रिप्ट में की जा सकती है और इसलिए डॉक्यूमेंट के पहले रेंडर से पहले, विजुअल-कष्टप्रद रेंडर से बचना, फिर कंपीट करना, फिर रेंडर करना। JQuery के साथ, आपको DOM तत्वों को बनाने के लिए इंतजार करना होगा, फिर री-स्टाइल और फिर से रेंडर करना होगा।
• टॉयलेट के बाद गतिशील रूप से जोड़े जाने वाले तत्वों में एक अतिरिक्त कॉल के बिना स्वचालित रूप से लागू नई शैली होगी jQuery(newElement).css()

चेतावनियां:

• मैंने इसे क्रोम और IE10 पर उपयोग किया है। मुझे लगता है कि यह IE के पुराने संस्करणों पर अच्छी तरह से काम करने के लिए थोड़ा संशोधन की आवश्यकता हो सकती है। विशेष रूप से, IE के पुराने संस्करणों को s.cssRulesपरिभाषित नहीं किया जा सकता है , इसलिए वे वापस आ जाएंगे, s.rulesजिसमें कुछ ख़ासियतें हैं, जैसे अल्पविराम से चुने गए चयनकर्ताओं से संबंधित अजीब / छोटी गाड़ी का व्यवहार, जैसे"body, p" । यदि आप उन से बचते हैं, तो आप बिना किसी संशोधन के पुराने IE संस्करणों में ठीक हो सकते हैं, लेकिन मैंने अभी तक इसका परीक्षण नहीं किया है।
• वर्तमान में चयनकर्ताओं को बिल्कुल मेल खाने की जरूरत है: निचले मामले का उपयोग करें, और अल्पविराम-सीमांकित सूचियों से सावधान रहें; आदेश का मिलान करने की आवश्यकता है और उन्हें प्रारूप में होना चाहिए "first, second"यानी सीमांकक एक अल्पविराम है जिसके बाद एक अंतरिक्ष वर्ण है।
• कोई शायद कुछ अतिरिक्त समय बिता सकता है, यह पता लगाने और बुद्धिमानी से अतिव्यापी चयनकर्ताओं को संभालने की कोशिश कर रहा है, जैसे कि अल्पविराम-सीमांकित सूचियों में।
• कोई मीडिया प्रश्नों और !importantसंशोधक के लिए बहुत अधिक परेशानी के बिना समर्थन जोड़ सकता है ।

यदि आप इस समारोह में कुछ सुधार करना चाहते हैं, तो आपको यहां कुछ उपयोगी एपीआई डॉक्स मिलेंगे: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 10

(असामान्य) मामलों में, जहाँ आप अक्सर शैलियों को गतिशील रूप से बदलने में सक्षम होना चाहते हैं - उदाहरण के लिए थीम बिल्डर ऐप - <स्टाइल> टैग जोड़ने या CSSStyleSheet.insertRule () को जोड़ने से बढ़ती स्टाइलशीट में परिणाम होगा, जिसमें प्रदर्शन और डिज़ाइन हो सकते हैं डिबगिंग निहितार्थ।

मेरा दृष्टिकोण केवल चयनकर्ता / संपत्ति कॉम्बो के लिए एक ही नियम की अनुमति देता है, किसी भी नियम को स्थापित करने पर किसी भी मौजूदा को साफ करना। एपीआई सरल और लचीला है:

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

उपयोग:

addStyles('body', {
    'background-color': 'black',
    color: 'green',
    margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')

Answer 11

क्या होगा यदि आपने गतिशील रूप से अपने पृष्ठ पर (अपने गतिशील नियमों के साथ) एक स्क्रिप्ट लिखी है और फिर उन गतिशील रूप से बनाए गए नियमों को जोड़ने के लिए jQuery का उपयोग किया है ।addClass (वर्ग)?

मैंने यह कोशिश नहीं की है, बस एक सिद्धांत पेश कर रहा हूं जो काम कर सकता है।

Comments

अभी सबसे अच्छा तरीका है। मैंने कुछ jQuery.cssRule पाया है, लेकिन कुछ प्रकार का प्लगइन है: - /

— स्टेफ़न

$ ("सिर")। परिशिष्ट ($ ("<शैली का प्रकार = 'पाठ / सीएसएस'> ... एक तरीका है

— Stephan

Answer 12

एक आलसी का थोड़ा सा उत्तर, लेकिन निम्नलिखित लेख मदद कर सकता है: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

इसके अलावा, Google में "सीएसएस नियमों को संशोधित करें" टाइप करने का प्रयास करें

यकीन नहीं होता है कि क्या हुआ अगर आपने एक दस्तावेज़ को लपेटने की कोशिश की। sstheets [0] jQuery के साथ () हालांकि आप एक कोशिश दे सकते हैं

Answer 13

आप एक cssRule प्लग-इन का उपयोग कर सकते हैं । कोड तब सरल था:

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

अब तक की टिप्पणियों में से एक ने पूछा कि कोई ऐसा क्यों करना चाहेगा। उदाहरण के लिए, एक सूची के लिए शैलियों का निर्माण जहां प्रत्येक आइटम को एक अलग पृष्ठभूमि के रंग की आवश्यकता होती है (जैसे। जीसीएल की कैलेंडर की सूची) जहां कॉलम की संख्या को चलाने के समय तक ज्ञात नहीं है।

Comments

@ डैनियल, हाँ यह करता है; बयान को हटा दिया गया।

— रॉबर्ट गोलैंड

ऐसा लगता है कि इस तरह से शासन का समर्थन नहीं करता है:div:before{content:'name: ';}

— liuyanghejerry

Answer 14

यहाँ एक सेटअप है जो इस जोंस ऑब्जेक्ट के साथ रंगों पर कमांड देता है

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

यह समारोह

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("\n"))
    )
}

इस शैली तत्व का उत्पादन करने के लिए

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

Answer 15

यदि आप एक डिस्प्ले असाइन नहीं करना चाहते हैं: कोई भी css क्लास में नहीं है, तो स्टाइल, jQuery.Rule पर काम करने के लिए सही तरीका अपनाएं।

मुझे कुछ मामले हैं जो आप चाहते हैं कि अजाक्स सामग्री के अपेंडेंट ईवेंट से पहले स्टाइल्स को लागू करें और एपेंड के बाद फीका सामग्री डालें और यह बात है!

Answer 16

यहाँ आपके पास CSS क्लास की पूरी परिभाषा पाने के लिए एक फंक्शन है:

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '';
};

Answer 17

आप cssobj नामक इस lib का उपयोग कर सकते हैं

var result = cssobj({'#my-window': {
  position: 'fixed',
  zIndex: '102',
  display:'none',
  top:'50%',
  left:'50%'
}})

किसी भी समय आप अपने नियमों को इस तरह से अपडेट कर सकते हैं:

result.obj['#my-window'].display = 'block'
result.update()

फिर आपको नियम बदल दिया गया। jQuery ऐसा करने वाला lib नहीं है।

Answer 18

मैं हाल ही में इसमें से कुछ के साथ खिलवाड़ कर रहा हूं और मैंने iPhone / iPod साइट की प्रोग्रामिंग करते समय दो अलग-अलग तरीकों का इस्तेमाल किया है।

अभिविन्यास में परिवर्तन की तलाश में जब मैं आया तो पहला तरीका यह था कि आप देख सकते हैं कि फोन पोर्ट्रेट है या लैंडस्केप, यह एक बहुत ही स्टैटिक तरीका है लेकिन सरल और चालाक है:

सीएसएस में:

#content_right,
#content_normal{
 display:none;
}

जेएस फाइल में:

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

PHP / HTML में (अपनी जेएस फ़ाइल को पहले बॉडी टैग में आयात करें):

<body onorientationchange="updateOrientation();">

यह मूल रूप से JS फ़ाइल से दिए गए परिणाम के आधार पर चलाने के लिए एक अलग प्री सेट सीएसएस ब्लॉक चुनता है।

इसके अलावा अधिक गतिशील तरीका जो मैंने पसंद किया वह स्क्रिप्ट टैग या आपकी JS फ़ाइल के लिए एक बहुत ही सरल जोड़ था:

document.getelementbyid(id).style.backgroundColor = '#ffffff';

यह अधिकांश ब्राउज़रों के लिए काम करता है, लेकिन IE के लिए यह सबसे अच्छा है कि यह कुछ सख्त के साथ गोला बारूद को ले जाए:

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

या आप getElementByClass()कई मदों का उपयोग और परिवर्तन कर सकते हैं ।

उम्मीद है की यह मदद करेगा!

ऐश।

Answer 19

हो सकता है कि आप शैली की जानकारी को अपनी css फ़ाइल में एक अलग वर्ग में रख सकें, जैसे:

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

और फिर इस वर्गनाम को तत्व में जोड़ने के लिए अपने चयन के बिंदु पर jQuery का उपयोग करें?

Comments

और आप अपने पेज के हेड सेक्शन में (स्टाइल टैग के बीच) जानकारी नहीं डालना चाहते हैं?

— जॉरनबी

Answer 20

आप बस एक css क्लास बना सकते हैं, जिसे कुछ ऐसा कहा जा सकता है जैसे कि .fixed-object जिसमें आपकी सभी css हो ...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

फिर jquery में कभी भी आप चाहते हैं कि कुछ ऐसा हो जो उस शैली को बस उस वर्ग में जोड़ दे ...

$(#my-window).addClass('fixed-object');

ऐसा करने का सबसे आसान तरीका लगता है, जब तक कि मुझे गलतफहमी न हो कि आपको क्या करना चाहिए।

Answer 21

Jquery में .addClass () का उपयोग करके हम पेज पर तत्वों को गतिशील रूप से जोड़ सकते हैं। जैसे। हमारी शैली है

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

अब गुड़ की तैयार अवस्था में हम सीएसएस को जोड़ सकते हैं जैसे .addClass (myStyle)