JavaScript에서 CSS를 수정하는 방법에는 4가지가 있습니다.
노드 스타일 수정(인라인 스타일)
노드 클래스 또는 ID 변경
새 CSS 작성
페이지에서 스타일 시트 교체.
뒤의 두 가지 방법은 사용하지 않는 것이 좋습니다. 처음 두 가지 방법을 통해 거의 모든 기능을 구현할 수 있으며 코드가 더 명확하고 이해하기 쉽습니다.
노드 스타일 수정(인라인 스타일)
이 메소드는 가중치가 가장 높습니다. 이는 노드의 스타일 속성에 직접 작성되며 다른 메소드에 의해 설정된 스타일을 재정의합니다. 사용법은 매우 간단합니다.
var element = document.getElementById("test");
element.style.display = "none" //Hide the element
그러나 일부 CSS 스타일에 유의하세요. name은font-size, background-image 등 여러 단어로 구성되며 모두 대시(-)로 연결되어 있습니다. 그러나 JavaScript에서는 대시가 "마이너스"를 의미하므로 다음과 같이 사용할 수 없습니다. 속성 이름. FontSize, backgroundImage와 같은 속성 이름을 작성하려면 "camelCase"를 사용해야 합니다.
또한 많은 스타일에는 단위가 있으므로 숫자만 제공할 수는 없습니다. 예를 들어, FontSize의 단위에는 px, em, %(백분율) 등이 있습니다.
Change class, id
id 및 class는 스타일 설정을 위한 "후크"입니다. 변경 후 브라우저는 요소의 스타일을 자동으로 업데이트합니다.
ID를 변경하는 방법은 클래스와 비슷하지만, 요소의 위치를 찾는 데 사용되기 때문에 개인적으로 이 방법을 사용하지 않는 것이 가장 좋습니다. JavaScript의 후크로 자주 사용되므로 불필요한 오류가 발생할 수 있습니다.
JavaScript에서 클래스는 예약된 키워드이므로 요소 클래스에 액세스하려면 className을 속성으로 사용하세요. 예:
.redColor{
color: red;
}
. yellowBack {
background: yellow;
}
element.className = "redColor";//클래스 설정
element.className += "yellowBack";//클래스 추가
HTML 요소의 스타일을 변경하려면 일반적으로 다음 구문을 사용하십시오.
document.getElementById(id).style.property=new style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="id1">标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>
다음 섹션