मैं बाहरी स्टाइल शीट का उपयोग कर जावास्क्रिप्ट ऑब्जेक्ट्स पर शैली गुणों का उपयोग कैसे कर सकता हूं?

Question

मैं इसे में इस के साथ किसी बाह्य शैली पत्रक है:

.box { 
padding-left:30px; 
background-color: #BBFF88; 
border-width: 0; 
overflow: hidden; 
width: 400px; 
height: 150px; 
} 

मैं तो इस राशि:

<div id="0" class="box" style="position: absolute; top: 20px; left: 20px;"> 

जब मैं तो div की चौड़ाई तक पहुँचने का प्रयास:

alert(document.getElementById("0").style.width); 

एक खाली चेतावनी बॉक्स आता है। मैं अपनी स्टाइल शीट में परिभाषित चौड़ाई वाली संपत्ति का उपयोग कैसे कर सकता हूं?

नोट: सही चौड़ाई के साथ div प्रदर्शित करता है।

Answer 1

आपको यह मान प्राप्त करने के लिए window.getComputedStyle का उपयोग करना चाहिए। यदि आप सीएसएस मूल्य की तलाश में हैं तो मैं offsetWidth या clientWidth का उपयोग करने की सलाह दूंगा क्योंकि वे चौड़ाई लौटते हैं जिसमें पैडिंग और अन्य गणना शामिल होती है।

getComputedStyle का उपयोग करना, अपने कोड होगा:

var e = document.getElementById('0'); 
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width"); 

इस के लिए दस्तावेज़ MDC पर दिया जाता है: window.getComputedStyle

Answer 2

offsetWidth अपने div की वास्तविक चौड़ाई प्रदर्शित करता है:

alert(document.getElementById("0").offsetWidth); 

यह चौड़ाई हालांकि, क्या आप अपने सीएसएस में स्थापित किया है करने के लिए अलग हो सकता है। jQuery रास्ता (मैं वास्तव में नहीं है उन्हें हर समय उल्लेख करना चाहते हैं, लेकिन वह क्या सभी पुस्तकालयों वहाँ के लिए कर रहे है) किया जाएगा:

$("#0").width(); // should return 400 
$("#0").offsetWidth(); // should return 400 as well 
$("#0").css("width"); // returns the string 400px 

Answer 3

मुझे आशा है कि यह उपयोगी है:

 function changecss(theClass,element,value) { 
//Last Updated on June 23, 2009 
//documentation for this script at 
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html 
var cssRules; 

var added = false; 
for (var S = 0; S < document.styleSheets.length; S++){ 

if (document.styleSheets[S]['rules']) { 
    cssRules = 'rules'; 
} else if (document.styleSheets[S]['cssRules']) { 
    cssRules = 'cssRules'; 
} else { 
    //no rules found... browser unknown 
} 

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) { 
    if (document.styleSheets[S][cssRules][R].selectorText == theClass) { 
    if(document.styleSheets[S][cssRules][R].style[element]){ 
    document.styleSheets[S][cssRules][R].style[element] = value; 
    added=true; 
    break; 
    } 
    } 
    } 
    if(!added){ 
    if(document.styleSheets[S].insertRule){ 
      document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length); 
     } else if (document.styleSheets[S].addRule) { 
      document.styleSheets[S].addRule(theClass,element+': '+value+';'); 
     } 
    } 
} 
} 

इसे here से लिया गया है।

Answer 4

जवाब ज्यादातर सही हैं, लेकिन जब आप उपयोग करने का प्रयास में अपने सिर करना होगा उन्हें ब्राउज़र के प्रतिपादन मोड (उर्फ सख्त/क्विर्क मोड, ब्राउज़र विक्रेता, आदि) पर निर्भर करता है - अंतिम उत्तर सबसे अच्छा है ... jquery का उपयोग करें।