JavaScript ile bir CSS değeri edinin

JavaScript gibi bir CSS değeri ayarlayabileceğimi biliyorum :

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

Ama, ben yapabilirsiniz olsun bir akım belirli stil değeri? Öğenin tüm stilini nereden bulabileceğimi okudum, ancak gerekmiyorsa tüm dizeyi ayrıştırmak istemiyorum.

Kullanabilirsiniz getComputedStyle().

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

jsFiddle .

Element.style özelliği, yalnızca o öğede satır içi olarak tanımlanan (programlı olarak veya öğenin stil özniteliğinde tanımlanan) CSS özelliklerini bilmenizi sağlar, hesaplanan stili almanız gerekir.

Çapraz tarayıcı bir şekilde yapmak o kadar kolay değil, IE element.currentStyle özelliği aracılığıyla kendi yoluna sahiptir ve diğer tarayıcılar tarafından uygulanan DOM Level 2 standart yolu document.defaultView.getComputedStyle yöntemidir.

İki yolun farklılıkları vardır, örneğin, IE element.currentStyle özelliği, camelCase'de iki veya daha fazla sözcükten oluşan CSS özellik adlarına erişmenizi bekler (örneğin, maxHeight, fontSize, backgroundColor, vb.), Standart yol özellikleri tire ile ayrılmış kelimeler (ör. maksimum yükseklik, yazı tipi boyutu, arka plan rengi, vb.). ......

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;
    }
}

Ana referans yığın akışı

Aşağıdakileri kullanın. Bana yardımcı oldu.

document.getElementById('image_1').offsetTop

Ayrıca bkz . Stilleri Alma .

DOM manipülasyonu olmadan CSS değerlerini kontrol etmek için çapraz tarayıcı çözümü:

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];
   }
  }
 }
};

Kullanımı:

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

Sterilize edilmiş versiyon (seçici girişi küçük harfe zorlar ve "." Harfi olmadan kullanım durumuna izin verir.)

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];
     }
    }
   }
  }
 }

Programlı olarak ayarlarsanız, değişken (ör. document.getElementById('image_1').style.top) Gibi çağırmanız yeterlidir . Aksi takdirde, her zaman jQuery kullanabilirsiniz:

<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>

2020'de

kullanmadan önce kontrol et

Kullanabilirsiniz ComputedStyleMap ()

Cevap geçerlidir, ancak bazen hangi birimi döndürdüğünü kontrol etmeniz gerekir, bunu herhangi bir slice()veya substring()dize olmadan alabilirsiniz .

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>

Kütüphaneye giriyorsanız neden MyLibrary ve getStyle olmasın .

JQuery css yöntemi yanlış adlandırılmıştır, CSS stilleri ayarlamanın yalnızca bir yoludur ve bir öğenin stil özelliklerinin gerçek değerlerini temsil etmeyebilir.

Güvenlik açısından, öğeyi okumaya çalışmadan önce var olup olmadığını kontrol etmek isteyebilirsiniz. Yoksa, kodunuz JavaScript'in geri kalanında yürütmeyi durduracak ve muhtemelen kullanıcıya bir hata mesajı görüntüleyecek bir istisna atar - iyi değil. Zarifçe başarısız olmak istiyorsun.

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
}

Yukarıda belirtilen DOM manipülasyonu olmayan çapraz tarayıcı çözümü işe yaramaz çünkü en son değil, ilk eşleşen kuralı verir. Son eşleşen kural geçerli olan kuraldır. İşte çalışan bir sürüm:

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;
}  

Ancak, bu basit arama karmaşık seçicilerde çalışmaz.