JavaScript HTML DOM - CSS 변경

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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setSize() { document.getElementById("t2").style.fontSize = "30px"; } function setColor() { document.getElementById("t2").style.color = "red"; } function setbgColor() { document.getElementById("t2").style.backgroundColor = "blue"; } function setBd() { document.getElementById("t2").style.border = "3px solid #FA8072"; } </script> </head> <body> <div id="t2">欢迎光临！</div> <p><button onclick="setSize()">大小</button> <button onclick="setColor()">颜色</button> <button onclick="setbgColor()">背景</button> <button onclick="setBd()">边框</button> </p> </body> </html>

제출하다 코드 재설정

자동운전