js-Methode, um Stil zu erhalten

js erhält den Stil

* {
    margin: 0;
    padding: 0;
}
.box {
    width: 200px;
    height: 100px;
    margin: 100px;
    padding: 50px;
    border: 20px solid #33ff11;
    background-color: #ff4343;
}

<p id="box" class="box"></p>

1. Wie js den Stil erhält 1

Sie können den Inline-Stil nur erhalten Stil, für Wenn der Stil nicht inline ist, können Sie

var box = document.getElementById('box');
console.log(box.style.width); // ""
console.log(box.style.height); // ""

2 nicht erhalten. So erhalten Sie den Stil mit js 2

window.getComputedStyle ist nicht mit IE9 und niedriger kompatibel currentStyle

console.log(window.getComputedStyle(box, null)); // 返回的是对象CSSStyleDeclaration
console.log(window.getComputedStyle(box, null).width); // 200px
console.log(window.getComputedStyle(box, null).margin); // 100px
console.log(window.getComputedStyle(box, null).backgroundColor); // rgb(255, 67, 67)

3. Kompatible Schreibmethode und entfernen Sie das Gerät

function getStyle(ele, attr) {  
    var val = null, reg = null;  
    if (window.getComputedStyle) {    
    val = window.getComputedStyle(ele, null)[attr];
  } else {    
      val = ele.currentStyle[attr];
  }
  reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; // 正则匹配单位 
  return reg.test(val) ? parseFloat(val) : val;
}

console.log(getStyle(box, 'width')); // 200
console.log(getStyle(box, 'border')); // 20px solid rgb(51, 255, 17)

Das obige ist der detaillierte Inhalt vonjs-Methode, um Stil zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!