जावास्क्रिप्ट के साथ एक सीएसएस मूल्य प्राप्त करें

Question

मुझे पता है कि मैं जावास्क्रिप्ट के माध्यम से एक सीएसएस मान सेट कर सकता हूं जैसे:

document.getElementById('image_1').style.top = '100px';

लेकिन, क्या मुझे वर्तमान विशिष्ट शैली मूल्य मिल सकता है ? मैंने पढ़ा है कि मुझे तत्व के लिए पूरी शैली कहां मिल सकती है, लेकिन मुझे नहीं करना है तो मुझे पूरी स्ट्रिंग को पार्स करना होगा।

Comments

आप किस 'विशिष्ट शैली मूल्य' को प्राप्त करने की कोशिश कर रहे हैं?

— ब्रायनह

वर्तमान स्थिति मूल्य: ऊंचाई, चौड़ाई, शीर्ष, मार्जिन, आदि

— माइकल पॉल

आपका प्रश्न आपको विश्वास दिलाता है कि आप कुछ ऐसा चाहते हैं जैसे var top = document.getElementById('image_1').style.top; मई इसे फिर से लिखना चाहता है यदि आप ऐसा नहीं चाहते हैं

— मार्क

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

— माइकल पॉल

Answer 1

आप उपयोग कर सकते हैं getComputedStyle()।

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle ।

Comments

यदि आप उदाहरण के लिए एक div का बैकग्राउंड कलर बदलना चाहते हैं, तो "backgroung-color" के बजाय USE "बैकग्राउंडर" का उपयोग न करें।)

— baptx

क्या एक संक्षिप्त विवरण है या क्या आपका मतलब धीमा है?

— डेविड विनीकी

getComputedStyle IE 8 और नीचे में समर्थित नहीं है।

— डेविड विनीकी

कुछ हद तक विषय: कुछ (सभी?) शॉर्टहैंड सीएसएस गुण जावास्क्रिप्ट में सुलभ नहीं हैं। उदाहरण के लिए, आप पैडिंग छोड़ सकते हैं, लेकिन पैडिंग नहीं। JSFiddle

— डेविड विनीकी

@DavidWiniecki मैं सच में विश्वास नहीं करना चाहिए कि webdevs को अभी भी IE8 को एक मुख्य धारा ब्राउज़र मानना ​​चाहिए। यह विचार करते हुए कि यह अब Microsoft द्वारा समर्थित नहीं है

— केविन कुइल

Answer 2

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

क्रॉस-ब्राउज़र तरीके से इसे करना इतना आसान नहीं है, IE का अपना तरीका है, element.currentStyle संपत्ति के माध्यम से, और DOM स्तर 2 मानक तरीका, अन्य ब्राउज़रों द्वारा लागू किया गया है। document.defaultView.getComputed.tyle विधि के माध्यम से।

दो तरीकों में अंतर है, उदाहरण के लिए, IE एलिमेंट.सर्कलसिटी प्रॉपर्टी की उम्मीद है कि आप कैमलकेस में दो या दो से अधिक शब्दों से बने सीएसएस प्रॉपर्टी नामों का उपयोग कर सकते हैं (जैसे मैक्सहाइट, फॉन्टसाइज़, बैकग्राउंडर आदि), मानक तरीका गुणों के साथ गुणों की अपेक्षा करता है डैश के साथ अलग किए गए शब्द (जैसे अधिकतम-ऊंचाई, फ़ॉन्ट-आकार, पृष्ठभूमि-रंग, आदि)। ......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
            return (function(value) {
                var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

मुख्य संदर्भ स्टैकओवरफ़्लो

Answer 3

निम्न का उपयोग करें। इसने मेरी मदद की।

document.getElementById('image_1').offsetTop

यह भी देखें शैलियाँ जाओ ।

Answer 4

बिना क्रॉस हेरफेर के CSS मानों की जाँच करने के लिए क्रॉस-ब्राउज़र समाधान:

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

उपयोग:

get_style_rule_value('.chart-color', 'backgroundColor')

Sanitized संस्करण (चयनकर्ता इनपुट को कम करने के लिए मजबूर करता है, और अग्रणी के बिना उपयोग के लिए अनुमति देता है ""।

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }

Comments

मैं बहुत दिन रहा और यह कई कारणों से काम नहीं कर रहा था। pastie.org/9754599 अमान्य नियम सूचियों को फेंककर और अंतिम === के दोनों किनारों को कम करके बहुत बेहतर काम करता है। बहुत धन्यवाद आपका समाधान अभी भी दिन बचा लिया!

— रिचर्ड फॉक्स

अच्छा जवाब, कुछ किनारे मामले का उपयोग मुद्दों को ठीक करने के लिए अंत में एक sanitized संस्करण जोड़ा।

— अप्रकाशित

Answer 5

यदि आप इसे प्रोग्रामेटिक रूप से सेट करते हैं, तो आप इसे एक चर (यानी document.getElementById('image_1').style.top) की तरह कह सकते हैं । अन्यथा, आप हमेशा jQuery का उपयोग कर सकते हैं:

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>

Comments

मुझे नहीं लगता कि आपका jQuery का उदाहरण बहुत स्पष्ट (या सही) है।

— एलेक्स

स्टाइल प्रॉपर्टी रिटर्न सभी स्टाइल इनलाइन तत्व पर लागू होती है, जो सीएसएस नियमों द्वारा परिभाषित नहीं होती है।

— स्टीवन कोच

Answer 6

यदि आप पुस्तकालयों में हैं, तो MyLibrary और getStyle क्यों नहीं ।

JQuery के सीएसएस विधि का नाम गलत है, CSS स्टाइल स्थापित करने का सिर्फ एक तरीका है और यह किसी तत्व की शैली के गुणों के वास्तविक मूल्यों का प्रतिनिधित्व नहीं करता है।

Answer 7

2020 में

उपयोग करने से पहले जाँच करें

आप computedStyleMap () का उपयोग कर सकते हैं

उत्तर मान्य है, लेकिन कभी-कभी आपको यह जांचने की आवश्यकता होती है कि यह किस इकाई में लौटता है, आप इसे बिना किसी slice()या substring()स्ट्रिंग के प्राप्त कर सकते हैं ।

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);

.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}

<div class="jsCSS"></div>

Answer 8

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

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}

Comments

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

— जुआन मेंडेस

आपके कमेंट के लिए धन्यवाद। मैं ऐसा इसलिए करता हूं क्योंकि मैं रक्षात्मक रूप से विकसित होता हूं। यहाँ सवाल है: आप उपयोगकर्ता की मशीन पर त्रुटि कैसे देखेंगे? याद रखें, आपकी मशीन पर आपके लिए जो काम करता है वह दूसरों के लिए काम नहीं कर सकता है (विभिन्न ब्राउज़र और ओएस, प्लगइन्स जो पृष्ठ व्यवहार को प्रभावित करते हैं, विभिन्न अन्य चीजें बंद हो जाती हैं, आदि)। मुद्दा यह था कि यह इनायत से विफल हो गया था, इसलिए पृष्ठ ने उपयोगकर्ता के लिए एक बेकार त्रुटि को पॉप करने के बजाय अभी भी कुछ करने का इरादा था।

— ब्रायनह

@BryanH वहाँ एक ब्राउज़र बग है जहाँ यह "image_1" की आईडी के साथ एक तत्व प्रदान नहीं करता है? ;)

— एलेक्स

@alex No. यदि उस आईडी के साथ कोई तत्व नहीं है, तो ओपी का कोड एक त्रुटि के साथ विफल हो जाएगा। उदाहरण है । मेरा सुझाव कोड करना था इसलिए ऐसा कभी नहीं हो सकता।

— ब्रायनह

Answer 9

बिना ऊपर दिए गए DOM मैनिपुलेशन के क्रॉस-ब्राउज़र समाधान काम नहीं करता है क्योंकि यह पहला मिलान नियम देता है, अंतिम नहीं। अंतिम मिलान नियम वह है जो लागू होता है। यहाँ एक कार्यशील संस्करण है:

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}  

हालांकि, जटिल चयनकर्ताओं के मामले में यह सरल खोज काम नहीं करेगी।