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>

이 경우 Get And 설정 스타일은 스타일속성에만 의존합니다. element.style 속성은 배열과 유사한 스타일 속성 집합과 해당 값 ​​​​을 반환하므로 특정 항목에 액세스할 때 스타일을 사용하려면 두 단계를 수행할 수 있습니다. 두 가지 방법은 "ele.style.Attribute name"과 "ele.style['Attribute name']"입니다. 그러나 background-color; 와 같은 CSS 스타일의 속성 이름에 대해서는 ele.style.backColor.
2. 첫 번째 방법, 즉 스타일 속성은 인라인 스타일만 가져올 수 있습니다.
그러나 실제 상황은 현재 문서는 기본적으로 분리 개념을 따르고 있으며 스타일은 기본적으로 외부 링크이므로 이 경우에는 다른 방법을 사용하여 이를 얻어야 합니다. 이 경우 스타일을 얻을 때 브라우저마다 처리 방법이 다릅니다(주로 IE와 비 IE). 따라서 브라우저에 따라 두 가지 방법으로 나눌 수 있습니다. (2.1)
IE 브라우저가 아닌
에서는 document.defaultViewobject의 getCompulatedStyle(ele, null/pseudo-class ) 메서드에서 이 메서드는 두 개의 매개 변수를 허용하는데, 첫 번째는 검사할 요소이고 두 번째는 상황에 따라 다릅니다. 요소 자체만 검사할 경우에는 null입니다. 이는 응답의 의사 클래스입니다. 이 방법으로 얻은 요소에 적용된 최종 스타일 조합도 유사한 배열의 인스턴스입니다. (2.2) IE 브라우저
에서는 getCompulatedStyle() 메소드를 지원하지 않지만 각 태그 요소의 style 속성과 유사한
current가 있습니다. . Style의 속성으로, 사용법은 Style 사용법과 동일합니다. 얻은 스타일의 범위가 다르다는 것입니다. 얻은 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>

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