English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML DOM는 JavaScript가 HTML 요소의 스타일(CSS)을 가져오고 변경할 수 있도록 합니다.
다음과 같이 사용할 수 있습니다style속성을 특정 HTML 요소에 스타일을 적용합니다.
HTML 요소의 스타일을 변경하려면 다음 문법을 사용하십시오：
element.style.property = value
아래의 예제는 변경됩니다<h1>요소의 스타일：
<!DOCTYPE html>
<html>
<h1 id="demo">HTML DOM style Property</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</html>테스트를 보세요‹/›사용자가 버튼을 클릭할 때, 이 예제는 변경됩니다<h1>요소의 스타일：
<h1 id="demo">HTML DOM style Property</h1>
<button onclick="myFunc()">클릭</button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
</script>테스트를 보세요‹/›사용자가 버튼을 클릭할 때, 이 예제는 또한 변경됩니다<h1>요소의 스타일：
<h1 id="demo">HTML DOM style Property</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">클릭</button>테스트를 보세요‹/›또한, 다음과 같이 사용할 수 있습니다style속성을 사용하여 HTML 요소에 스타일을 적용합니다.
다음 예제는 id가id="demo"요소의 스타일 정보를 가져옵니다（border-top）：
var x = document.getElementById("demo").style.borderTop;테스트를 보세요‹/›주의:요소에서 스타일 정보를 가져올 때style스타일 정보에서, 이 속성은 매우 유용하지 않습니다. 이 속성은 요소의 style 속성에 설정된 스타일 규칙만 반환하며, 예를 들어 내장 스타일 시트의 스타일 규칙이나 외부 스타일 시트에서 오는 스타일 규칙을 반환하지 않습니다.
실제로 요소에 적용된 모든 CSS 속성 값을 가져오기 위해 다음을 사용할 수 있습니다.window.getComputedStyle()메서드：
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');테스트를 보세요‹/›또한 사용할 수 있습니다.className속성을 통해 HTML 요소의 CSS 클래스를 가져오거나 설정할 수 있습니다.
document.getElementById("x").className = "para";테스트를 보세요‹/›이를 통해도 사용할 수 있습니다.classListCSS 클래스를 쉽게 요소에서 가져오거나 설정하거나 제거할 수 있습니다.
아래의 예제는<p>요소에 하나의para클래스:
var elem = document.getElementById("x");
elem.classList.add("para");테스트를 보세요‹/›다수의 클래스를 추가<p>요소:
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");테스트를 보세요‹/›부터<p>요소에서 하나의 클래스를 제거:
var elem = document.getElementById("x");
elem.classList.remove("para");테스트를 보세요‹/›두 개의 클래스 사이에서 전환<p>요소:
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");테스트를 보세요‹/›사이드 네비게이션 버튼을 생성하기 위해 한 개의 클래스를 전환하세요: