[CSS_Objects] JS - style.length 속성 - 스타일 선언 개수 반환 (= 스타일렝스 속성)

1. style.length 예제 - 요소의 스타일 속성 개수
2. style.length 정의
3. style.length 구문
4. style.length 예제 - 요소의 스타일 속성 모두 표시

style.length 예제 - 요소의 스타일 속성 개수 

 

<h1 style="color:red; font-size: 50px">Homzzang.com</h1>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var h1 = document.getElementsByTagName("h1")[0];

  var x = h1.style.length;

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 (결과값: 2)

style.length 정의

 

지정 요소의 인라인스타일에 선언된 속성 개수 반환.

 

---

 

1. 읽기 전용  

2. 모든 브라우저 지원. 

 

style.length 구문

 

element.style.length

 

style.length 예제 - 요소의 스타일 속성 모두 표시

 

<h1 style="color:red; font-size: 50px">Homzzang.com</h1>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var h1, i, txt = "";

  h1 = document.getElementsByTagName("h1")[0];

  for (i = 0; i < h1.style.length; i++) {

    txt += h1.style.item(i) + "<br>";

  }

  document.getElementById("demo").innerHTML += txt;

}

</script>