js를 구문 분석하여 CSS 스타일을 얻는 방법

1. 인라인 스타일 가져오기

<p id ="myp" style="width:100px;height:100px;background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");

  alert(myp.style.width);//100px

  alert(myp.style[&#39;height&#39;]);//100px

  var style=myp.style;
  alert(style.backgroundColor);//red

  myp.style.backgroundColor=&#39;green&#39;;//myp背景色变为绿色 
</script>

이 경우 스타일 가져오기 및 설정은 스타일 속성에만 의존합니다. , element.style 속성은 배열과 같은 스타일 속성 집합과 해당 값을 반환하기 때문에 특정 스타일에 액세스하는 방법에는 "ele.style.property name"과 "ele.style['property name' ]이라는 두 가지 방법이 있습니다. ". 그러나 CSS 스타일에서 background-color, margin-left와 같이 대시로 연결된 속성 이름의 경우 스타일 속성을 사용하여 스타일을 설정하는 경우 이름을 카멜 케이스로 변경해야 합니다. as ele.style. backgroundColor.

2. 첫 번째 방법인 style 속성을 사용하면 인라인 스타일만 얻을 수 있기 때문입니다. 그러나 실제 상황은 현재 문서는 기본적으로 분리 개념을 따르고 있으며 스타일은 기본적으로 외부 링크이므로 이 경우에는 다른 방법을 사용하여 이를 얻어야 합니다. 이 경우 스타일을 얻을 때 브라우저마다 처리 방법이 다릅니다(주로 IE와 비 IE). 따라서 브라우저에 따라 두 가지 방법으로 나눌 수 있습니다.

(2.1) IE가 아닌 브라우저에서는 document.defaultView 개체의 getComputeStyle(ele, null/pseudo-class) 메서드를 사용합니다. 이 메서드는 첫 번째 매개 변수는 검사할 요소이고 두 번째 매개 변수는 다음과 같습니다. 상황에 따라 요소 자체만 검사하면 null이 될 수도 있고 의사 클래스를 검사하려는 경우 응답의 의사 클래스가 될 수도 있습니다. 이 방법으로 얻은 요소에 적용된 최종 스타일 조합도 유사한 배열의 인스턴스입니다.

(2.2) IE 브라우저에서는 getComputeStyle() 메소드를 지원하지 않으나 각 태그 요소는 style 속성의 currentStyle과 유사한 속성을 가지며 사용법은 동일합니다. 스타일의 사용법은 동일합니다. 얻은 스타일의 범위가 다르다는 것입니다. 얻은 currentStyle은 getCompulatedStyle() 메서드에 가깝습니다.

처리 중 호환성을 확보하려면 이 두 가지 처리 방법을 기반으로 기능을 만들어 호환성을 확보해야 어떤 종류의 브라우저에서도 성공적으로 스타일을 얻을 수 있습니다. 아래와 같습니다:

<style type="text/css">
#myp {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<p id ="myp" style="background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");
  var finalStyle = myp.currentStyle ? myp.currentStyle : document.defaultView.getComputedStyle(myp, null);/*利用判断是否支持currentStyle（是否为ie）
  来通过不同方法获取style*/
  alert(finalStyle.backgroundColor);  //"red"
  alert(finalStyle.width);       //"100px"
  alert(finalStyle.height);       //"200px"
</script>

위 내용은 CSS 스타일을 얻기 위해 js를 파싱하는 내용입니다. PHP 중국어 웹사이트(www.php.cn)로 이동하세요!