열정과 게으름 사이

자바스크립트 css값 얻기 본문

공부 메모/javaScript

자바스크립트 css값 얻기

현냥이 2021. 5. 8. 04:50

 

계산을 요하거나 할때 css의 값을 읽어야 경우 두가지 방법으로 css 값을 읽을 수 있다.

1. getElementsBycClassName()[0].style  or  querySelector().style 메소드를 사용

2. getComputedStyle() 메소드를 사용

 

두 경우 같은 결과를 읽어올 수도 아닐 수도 있다. 

읽어오는 결과는 css가 인라인으로 작성되었는가, 외부 css를 사용하였는가, js를 사요하였는가에 따라 달라진다.

    <style>
        .div1{background-color: burlywood;}
        .div2{width: 100px; height:50px; background-color: blue;}
        .div3{background-color:blueviolet;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>  
    <div class="div3"></div>
    <div class="div4" style="width:100px; height: 50px; background-color: brown;"></div>


    <script>
        let div1=document.getElementsByClassName('div1');
        let div2=document.getElementsByClassName('div2');
        let div3=document.getElementsByClassName('div3');
        let div4=document.getElementsByClassName('div4');

      //css가 아닌 js로 스타일 지정  
        div3[0].style.width=100+'px';
        div3[0].style.height=50+'px';


     //콘솔 출력
   33라인     console.log(document.querySelector('.div1').style.width);
   34라인     console.log(window.getComputedStyle(div1[0]).width);

   36라인     console.log(document.querySelector('.div2').style.width);
   37라인     console.log(window.getComputedStyle(div2[0],null).width);

   39라인     console.log(document.querySelector('.div3').style.width);
   40라인     console.log(window.getComputedStyle(div3[0],null).width);

   42라인     console.log(document.querySelector('.div4').style.width);
   43라인     console.log(window.getComputedStyle(div3[0],null).width);
      </script>
</body>

콘솔창을 보면, 33라인과 36라인은 값을 읽어오지 못하지만, 같은 클래스를 가리키는 34라인과 37라인은 값을 읽어온다.

.div1의 경우 width값이 없기 때문에 100%의 값에서 스크롤바 너비가 빠진값이 읽어진 것이고, .div2의 경우 외부 css로 설정한 값이 읽어졌다.

인라인과 js로 스타일을 지정한 .div3과 .div4의 경우는 두 메소드 모두로 값이 읽어진다.

-> getElementsBycClassName()[0].style  or  querySelector().style 의 경우는 인라인으로 적용된 스타일을 읽고

-> getComputedStyle()는 MDN문서에 보면

 : 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값'이라고 나와 있다.

 

뭐... 괜히 복잡해 보이는데.

요소.style 로 값을 못 읽을 경우. getComputedSytle()로 읽으면 된다. 정도로 요약....

 

width 같은 계산이 필요한 값을 가져올 경우

=>80px 로 출력이 되기 때문에

이대로 변수에 받아 계산시 문자열로 인식되서 NaN이 나온다.

변수로 받을때는

let divWidth = window.getComputedStyle('div1',null).width.replace(/[^0-9]/g,""); 

숫자가 아닌 것은 공백을 만들어서 넘긴 후 사용.

그래도 NaN이 나올경우 Number()로 형변환 해서 사용하면 된다.

+메소드의 두번째 인자인 null은 생략이 가능하다.

null 자리의 인자는 ::before ,::after 등 가상요소를 선택할때 쓰인다.

let div1= document.querySelector('div');

window.getComputedStyle(div1, '::before').width;
//=> 10px

let input= document.querySelector('input');

window.getComputedStyle(input, '::placeholder').cloor;

 

반응형
저작자표시 비영리 변경금지

'공부 메모 > javaScript' 카테고리의 다른 글

자바스크립트 크기 구하기  (0) 2021.05.12
자바스크립트 마우스 좌표 얻기  (0) 2021.05.12
자바스크립트-한 글자씩 타이핑 되게 하기  (0) 2021.03.01
자바스크립트로 index() 구현  (0) 2021.01.28
간단한 프레시그바  (0) 2021.01.23
'공부 메모/javaScript' Related Articles more
Comments