Javascript & jQuery로 style 속성 css 입력, 수정하기

우선 테스트할 html을 작성한다.

 

Javascript

<div style="width:300px;height:300px; border-width:1px; border-style:solid;">
   <div id="testId" style="width:100px; height:100px; background-color:pink;"></div>
</div>

 

여기서 testId div의 css 속성을 수정하고 추가해본다.

 

document.getElementById('testId').style.backgroundColor = 'blue';

document.getElementById('testId').style.marginLeft = '100px';

document.getElementById('testId').style.backgroundColor = 'blue';
document.getElementById('testId').style.marginLeft = '100px';

추가 수정은 같은 방법으로 하면 된다.

jQuery

제이쿼리는 좀 더 짧은 명령어로 할 수 있다.

$('#testId').css('background-color', 'black');
$('#testId').css('margin-left', '50px');
$('#testId').css('height', '150px');