जावास्क्रिप्ट के साथ सीएसएस मूल्यों को बदलना

Question

जावास्क्रिप्ट के साथ इनलाइन सीएसएस मूल्यों को सेट करना आसान है। अगर मैं चौड़ाई बदलना चाहता हूं और मेरे पास html इस तरह है:

<div style="width: 10px"></div>

मुझे बस इतना करना चाहिए:

document.getElementById('id').style.width = value;

यह इनलाइन स्टाइलशीट मानों को बदल देगा। आम तौर पर यह कोई समस्या नहीं है, क्योंकि इनलाइन शैली स्टाइलशीट को ओवरराइड करती है। उदाहरण:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

इस जावास्क्रिप्ट का उपयोग करना:

document.getElementById('tId').style.width = "30%";

मुझे निम्नलिखित मिले:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

यह एक समस्या है, क्योंकि न केवल मैं इनलाइन मानों को बदलना नहीं चाहता हूं, अगर मैं इसे सेट करने से पहले चौड़ाई की तलाश करता हूं, जब मैं करता हूं:

<div id="tId"></div>

लौटाया गया मान अशक्त है, इसलिए यदि मेरे पास जावास्क्रिप्ट है, जिसे कुछ तर्क करने के लिए कुछ की चौड़ाई जानने की आवश्यकता है (मैं चौड़ाई 1% बढ़ाता हूं, विशिष्ट मूल्य तक नहीं), शून्य प्राप्त होने पर मुझे स्ट्रिंग की उम्मीद है "50% "वास्तव में काम नहीं करता है।

तो मेरा प्रश्न: मेरे पास CSS शैली में मान हैं जो इनलाइन में स्थित नहीं हैं, मैं इन मूल्यों को कैसे प्राप्त कर सकता हूं? मैं इनलाइन मानों के बजाय शैली को कैसे संशोधित कर सकता हूं, एक आईडी दी गई है?

Comments

क्या आप अपनी पोस्ट संपादित कर सकते हैं? शुरुआत में कुछ अधूरे वाक्य हैं, निश्चित नहीं कि आप क्या ढूंढ रहे थे ...

— जेसन एस

मैं अभी भी थोड़ा उलझन में हूं कि आप क्या पूछ रहे हैं। क्या आप सीएसएस को बदलने के लिए 1) पूछ रहे हैं जो एक ही बार में सभी तत्वों को बदल देगा? या 2) एक बार में एक आइटम के लिए सीएसएस बदलने के लिए?

— माइक

मैं भी उलझन में हूँ, जैसा कि वास्तविक सवाल है। ऑब्जेक्ट की वर्तमान शैली आवश्यक नहीं है कि टैग की 'शैली' विशेषता के समान हो।

— मैटज

क्षमा करें मैं इसे अधिक स्पष्ट होने के लिए संपादित करूंगा। मैं इनलाइन सीएसएस सेट नहीं करना चाहता। मैं शैली की चौड़ाई बढ़ाने / घटाने में सक्षम होना चाहता हूं। मैं जो देख रहा हूँ उसका पूरा उदाहरण के साथ संपादित करूँगा।

— कोल्टिन

कोडपेन का जवाब codepen.io/quezo/post/dynamically-updating-css

— Nick Mitchell

Answer 1

ठीक है, ऐसा लगता है कि आप वैश्विक सीएसएस को बदलना चाहते हैं ताकि एक ही बार में पेटिक स्टाइल के सभी तत्वों को बदल दिया जाए। मैंने हाल ही में शॉन ओल्सन ट्यूटोरियल से खुद को ऐसा करने का तरीका सीखा है । आप सीधे उनके कोड का संदर्भ यहां दे सकते हैं ।

यहाँ सारांश है:

आप के माध्यम से स्टाइलशीट पुनः प्राप्त कर सकते हैं document.styleSheets। यह वास्तव में आपके पेज की सभी शैलियों की एक सरणी लौटाएगा, लेकिन आप बता सकते हैं कि आप किस document.styleSheets[styleIndex].hrefसंपत्ति के माध्यम से हैं। एक बार जब आप उस स्टाइलशीट को पा लेते हैं जिसे आप संपादित करना चाहते हैं, तो आपको नियमों की सरणी प्राप्त करने की आवश्यकता है। इसे IE में "नियम" और अधिकांश अन्य ब्राउज़रों में "cssRules" कहा जाता है। यह बताने का तरीका कि आप संपत्ति पर CSSRule क्या कर रहे selectorTextहैं। वर्किंग कोड कुछ इस तरह दिखता है:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

मुझे बताएं कि यह आपके लिए कैसे काम करता है, और यदि आपको कोई त्रुटि दिखाई देती है तो कृपया टिप्पणी करें।

Comments

अगर आपके पास 100s + एलिमेंट्स हैं तो CSS बदलना इस तरह से बहुत तेज़ है। उदाहरण के लिए कहें, एक बार में एक तालिका के एक निश्चित हिस्से में सभी कोशिकाओं को बदल रहा है।

— EdH

मैं rule.valueFF 20 में नहीं मिल सकता है। rule.styleहालांकि, जो सुलझा हुआ है और जैसा व्यवहार करता है element.style। सी एफ https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule । rule.type == rule.STYLE_RULEपहुँचने से पहले जाँच करना भी एक अच्छा विचार हो सकता है rule.selectorText।

— क्रिश्चियन आइचिंगर

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

— जेसन मैगार्ड

2016 में इसका उपयोग करें: developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/…

— the_web

document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};मेरे लिए काम किया, धन्यवाद!

— पावेल

Answer 2

कृप्या! बस w3 ( http://www.quirksmode.org/dom/w3c_css.html ) से पूछें ! या वास्तव में, मुझे पांच घंटे लग गए ... लेकिन यहाँ यह है!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

फ़ंक्शन का उपयोग करना वास्तव में आसान है .. उदाहरण:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

ओह ..

---

EDIT: जैसा कि @ user21820 ने अपने उत्तर में बताया है, पेज पर सभी स्टाइलशीट को बदलना थोड़ा अनावश्यक हो सकता है। निम्न स्क्रिप्ट IE5.5 के साथ-साथ नवीनतम Google Chrome के साथ काम करता है, और केवल ऊपर वर्णित सीएसएस () फ़ंक्शन को जोड़ता है।

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);

Comments

गंभीरता से आसान कार्यान्वयन। धन्यवाद

— Kaleb एंडरसन

क्या हर एक स्टाइलशीट को संशोधित करने का एक कारण है, मेरे जवाब में सिर्फ एक नए बनाए गए के विपरीत?

— user21820

बहुत अच्छा कार्यान्वयन। कुदोस टू यू सर।

— जेसन मैगार्ड

@ user21820, शायद नहीं। मुझे लगता है कि मैं वास्तव में सुरक्षित पक्ष में होना चाहता था .. जवाब अंत में अद्यतन, आप के लिए यश :)

— लियोनार्ड पाउली

Answer 3

उत्तरों में कोड को इकट्ठा करते हुए, मैंने यह फ़ंक्शन लिखा जो मेरे FF 25 पर अच्छी तरह से चल रहा है।

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

यह सीएसएस में मूल्यों को डालने का एक तरीका है जो जेएस में उपयोग किया जाएगा भले ही ब्राउज़र द्वारा समझ में न आए। उदाहरण के लिए एक स्क्रॉल तालिका में एक व्यक्ति के लिए अधिकतम ऊंचाई।

कॉल करें:

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

Comments

यदि शैली HTML पृष्ठ में एम्बेड की गई है, तो document.styleSheets[m].hrefवह अशक्त और विफल हो जाएगी।

— JCM

Answer 4

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

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

ध्यान दें कि हम संपत्ति पर सीधे "महत्वपूर्ण!" जोड़कर भी इनलाइन शैलियों को ओवरराइड कर सकते हैं, जब तक कि पहले से ही अधिक विशिष्ट "मौजूद न हों"! उस संपत्ति के लिए महत्वपूर्ण "शैली घोषणाएं"।

Comments

अधिक जटिल संस्करण के लिए developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… देखें ।

— user21820

सच सच। .Indrule (चयनकर्ता, गुण + ':' + मान) का उपयोग करना सुनिश्चित करें यदि .insertRule विफल रहता है (पूर्व IE9 समर्थन के लिए)।

— लियोनार्ड पौली

Answer 5

मेरे पास टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं है इसलिए मैं एक उत्तर को प्रारूपित करूंगा, फिर भी यह केवल प्रश्न में समस्या का प्रदर्शन है।

ऐसा लगता है, जब तत्व शैलियों को स्टाइलशीट में परिभाषित किया जाता है, तो वे getElementById ("someFlement") शैली के लिए दृश्यमान नहीं होते हैं।

यह कोड समस्या का चित्रण करता है ... jsFiddle पर नीचे से कोड ।

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

यहाँ पृष्ठ कोड है ...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

मुझे उम्मीद है कि यह इस मुद्दे को रोशन करने में मदद करता है।

छोड़ें

Answer 6

आप किसी भी तत्व की "गणना" शैली प्राप्त कर सकते हैं।

IE "currentStyle" नामक कुछ का उपयोग करता है, फ़ायरफ़ॉक्स (और मुझे लगता है कि अन्य "मानक अनुरूप" ब्राउज़र) "defaultView.getComputedStyle" का उपयोग करता है।

ऐसा करने के लिए आपको एक क्रॉस ब्राउज़र फ़ंक्शन लिखना होगा, या प्रोटोटाइप या jQuery जैसे अच्छे जावास्क्रिप्ट फ्रेमवर्क का उपयोग करना होगा (प्रोटोटाइप जावास्क्रिप्ट फ़ाइल में "getStyle" और jquery जावास्क्रिप्ट फ़ाइल में "curCss")।

अगर आपको ऊंचाई या चौड़ाई की आवश्यकता है, तो आपको संभवतः element.offsetHeight और element.offsetWidth का उपयोग करना चाहिए।

लौटाया गया मान अशक्त है, इसलिए यदि मेरे पास जावास्क्रिप्ट है जिसे कुछ तर्क करने के लिए कुछ की चौड़ाई जानने की जरूरत है (मैं चौड़ाई को 1% बढ़ाता हूं, विशिष्ट मूल्य तक नहीं)

मन, यदि आप प्रश्न में एक इनलाइन शैली जोड़ते हैं, तो यह "डिफ़ॉल्ट" मान के रूप में कार्य कर सकता है और पेज लोड पर जावास्क्रिप्ट द्वारा पठनीय होगा, क्योंकि यह तत्व की इनलाइन शैली संपत्ति है:

<div style="width:50%">....</div>

Answer 7

यह सरल 32 रेखाएं आपको एक दी गई स्टाइलशीट की पहचान करने देती हैं और इसकी शैलियों को बहुत आसानी से बदल देती हैं:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");

Answer 8

मैंने कभी भी इसका कोई व्यावहारिक उपयोग नहीं देखा है, लेकिन आपको शायद DOM स्टाइलशीट पर विचार करना चाहिए । हालांकि, मैं ईमानदारी से लगता है कि overkill है।

यदि आप किसी तत्व की चौड़ाई और ऊँचाई प्राप्त करना चाहते हैं, तो इसके बावजूद कि आयाम कहाँ से लागू किए जा रहे हैं, बस उपयोग करें element.offsetWidthऔर element.offsetHeight।

Comments

मेरा उपयोग: <style> #tid {चौड़ाई: 10%; } </ style> <div id = 'tid' onclick = "increase ('tid')"> </ div> वृद्धि की जांच करेगा कि चौड़ाई <100% है, यदि ऐसा है तो यह 1% तक बढ़ जाएगा। document.getElementById.style. उपलब्धता रिटर्न शून्य है क्योंकि कोई इनलाइन मान नहीं है। क्या डोम स्टाइल्सशीट की तुलना में अधिक सरल तरीका है?

— कोल्टिन

Answer 9

शायद यह कोशिश:

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}