Dapatkan nilai CSS dengan JavaScript

Saya tahu saya dapat menetapkan nilai CSS melalui JavaScript seperti:

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

Tapi, bisakah saya mendapatkan nilai gaya spesifik saat ini? Saya sudah membaca di mana saya bisa mendapatkan seluruh gaya untuk elemen, tetapi saya tidak ingin harus menguraikan seluruh string jika saya tidak harus.

Anda bisa menggunakannya getComputedStyle().

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

jsFiddle .

Properti element.style memberi tahu Anda hanya properti CSS yang didefinisikan sebagai sebaris pada elemen tersebut (secara terprogram, atau didefinisikan dalam atribut style elemen), Anda harus mendapatkan gaya yang dikomputasi.

Tidak begitu mudah untuk melakukannya dengan cara browser silang, IE memiliki caranya sendiri, melalui properti element.currentStyle, dan cara standar Level 2 DOM, yang diterapkan oleh browser lain adalah melalui metode document.defaultView.getComputedStyle.

Dua cara memiliki perbedaan, misalnya, properti IE element.currentStyle berharap Anda mengakses nama properti CSS yang terdiri dari dua kata atau lebih di camelCase (mis. MaxHeight, fontSize, backgroundColor, dll), cara standar mengharapkan properti dengan kata-kata yang dipisahkan dengan tanda hubung (mis. ketinggian maksimal, ukuran font, warna latar belakang, dll). ......

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

Referensi utama stackoverflow

Gunakan yang berikut ini. Itu membantu saya.

document.getElementById('image_1').offsetTop

Lihat juga Dapatkan Gaya .

Solusi lintas-browser untuk memeriksa nilai-nilai CSS tanpa manipulasi DOM:

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

Pemakaian:

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

Versi yang sudah disanitasi (memaksa input pemilih ke huruf kecil, dan memungkinkan case use tanpa memimpin ".")

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

Jika Anda mengaturnya secara terprogram Anda bisa menyebutnya seperti variabel (yaitu document.getElementById('image_1').style.top). Jika tidak, Anda selalu dapat menggunakan 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>

Jika Anda ke perpustakaan, mengapa tidak MyLibrary dan getStyle .

Metode jQuery css salah nama, CSS hanyalah salah satu cara pengaturan gaya dan tidak selalu mewakili nilai aktual properti gaya elemen.

Pada 2020

periksa sebelum digunakan

Anda dapat menggunakan computedStyleMap ()

Jawabannya valid tetapi kadang-kadang Anda perlu memeriksa unit apa yang dikembalikan, Anda bisa mendapatkannya tanpa slice()atau substring()string.

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>

Sebagai masalah keamanan, Anda mungkin ingin memeriksa apakah elemen itu ada sebelum Anda mencoba membacanya. Jika tidak ada, kode Anda akan mengeluarkan pengecualian, yang akan menghentikan eksekusi pada sisa JavaScript Anda dan berpotensi menampilkan pesan kesalahan kepada pengguna - tidak baik. Anda ingin bisa gagal dengan anggun.

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
}

Solusi lintas-browser tanpa manipulasi DOM yang diberikan di atas tidak berfungsi karena memberikan aturan yang cocok pertama, bukan yang terakhir. Aturan pencocokan terakhir adalah yang berlaku. Ini adalah versi yang berfungsi:

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

Namun, pencarian sederhana ini tidak akan berfungsi jika ada pemilih yang kompleks.