JavaScript 로 CSS 조작하는 방법

jQuery를 사용하면 편리하지만, JavaScript 로 CSS를 조작해야 할 때가 있는데요. 이번 시간에는 JavaScript에서 CSS 조작 방법을 정리해 보았습니다.

 

jQuery로 CSS를 조작하는 경우

$(function() {

    $("#example").css({

        "color": "blue",

        "font-weight": "bold"

    });

});

과 같이 기술하면 간단히 조작이 가능합니다. 그러나 안건에 따라 jQuery 것이 사용할 수 없거나, 대상의 요소가 SVG 등의 브라우저에서 인식되지 않는 등 jQuery를 사용하지 못하고 JavaScript를 사용해야 할 때가 있습니다.

 

jQuery로 CSS를 조작하는 방법 자세히 보기

jQuery 로 CSS 속성을 동적으로 추가, 수정, 삭제하는 방법

 

JavaScript 로 CSS 를 조작하는 방법은 아래와 같습니다. 

방법

var target = document.getElementById("example"); //대상 요소를 ID로 지정 
var target2 = document.getElementsByTagName("div"); //대상 요소를 태그로 지정 
var target3 = document.getElementsByClassName("example"); //대상 요소를 클래스로 지정 

target.style.color = "red";
target.style.fontWeight = "bold";
for(var i = 0; i < target2.length; i++) {
    target2[i].style.color = "red";
    target2[i].style.fontWeight = "bold";
}

for(var i = 0; i < target3.length; i++) {
    target3[i].style.color = "red";
    target3[i].style.fontWeight = "bold";
}

 

대상이되는 요소는 ID 나 태그 이름으로 지정하고 변수에 저장합니다.

 

저장된 대상 요소에 대해

 

요소.style.속성 = "값";

 

라고 기술하여 CSS를 변경 할 수 있습니다.

 

element	CSS 속성 값을 변경하는 요소
attribute	변경하려는 속성
value	변경하려는 속성 값

 

변경하려는 속성

 

특성 (예)	설명	사용 예
backgroundColor	배경색	style.backgroundColor = "#BBCCDD"
color	문자색	style.color = "#BBCCDD"
visibility	표시 숨기기	style.visibility = "hidden"style.visibility = "visible"
position	위치 지정	style.position = "absolute"
borderWidth	테두리 두께	style.borderWidth = "2px"
borderColor	테두리 색	style.borderColor = "# 645fa7"
borderStyle	테두리의 종류	style.borderStyle = "solid"
width	폭	style.width = "100px"
height	높이	style.height = "200px"
top	위 위치	style.top = 10
left	왼쪽 위치	style.left = 10

 

참고로 font-size 이나 -webkit-transition 처럼 하이픈이 들어 있는 경우, fontSize, webkitTransition 처럼 연결단어의 시작을 대문자로 연결하는 로어 카멜 방식으로 작성하여 지정할 수 있습니다.