스타일을 얻는 js 메소드

一个新手
풀어 주다: 2017-10-19 10:36:43
원래의
1387명이 탐색했습니다.


js가 스타일을 얻습니다

* {
    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. js가 스타일을 얻는 방법 1

스타일을 통해서만 인라인 스타일을 얻을 수 있고, 인라인 스타일이 아닌 경우에는 얻을 수 없습니다

var box = document.getElementById(&#39;box&#39;);
console.log(box.style.width); // ""
console.log(box.style.height); // ""
로그인 후 복사

2. js가 스타일을 얻는 방식 2

window .getCompulatedStyle은 IE9

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 이하의 currentStyle과 호환되지 않으며 호환되는 쓰기 방법 및 유닛

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, &#39;width&#39;)); // 200
console.log(getStyle(box, &#39;border&#39;)); // 20px solid rgb(51, 255, 17)
로그인 후 복사
을 제거합니다.

위 내용은 스타일을 얻는 js 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿