JS는 페이지에서 조건을 선택하여 사용자가 페이지의 스타일을 변경한다는 것을 알 수 있습니다. 페이지 스타일은 스타일 또는 CSS를 통해 수정할 수 있습니다. JS를 살펴보고 스타일 스타일을 바꾸겠습니다. 코드는 다음과 같습니다.
<! docType html public "-// w3c // dtd html 4.01 Transitional // en"> <html> <head> <title> change.html. type = "text/css"href = "./ styles.css">->-> <script language = "javaScript"> function test4 (event) {if (event.value == "black") {// get div1 var div1 = document.getElementById ( 'div1'); div1.style.backgroundColor = "Black"; } if (event.value == "red") {// get div1 var div1 = document.getElementById ( 'div1'); div1.style.backgroundColor = "Red"; }} </script> </head> <bod> <div id = "div1"> div1 </div> <입력 유형 = "button"value = "black"onclick = "test4 (this)"/> <입력 유형 = "value ="red "onclick ="test4 (this) "/> </html>test4 (this)는 객체로 취급하는 것과 동등한 전류 <입력을 나타냅니다.
CSS 스타일 변경을 다시 살펴 보겠습니다. 코드는 다음과 같습니다.
<! docType html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <html> <html> <title> change1.html </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> inlink rel = "stylsheet" "" "" " href = "css/change.css"> <script language = "javaScript"> function "> function test4 (이벤트) {// 스타일 시트에서 모든 클래스 선택기를 가져 오려면 var ocssrules = document.stylesheets [0] .rules; // 클래스를 꺼냅니다. var style1 = ocssrules [0]; if (event.value == "black") {//window.alert(style1.style.backgroundColor); Style1.style.backgroundColor = "Black"; } else if (event.value == "red") {style1.style.backgroundcolor = "red"; }} </script> </head> <bod> <div id = "div1"> div1 </div> <입력 유형 = "button"value = "black"onclick = "test4 (this)"/> <입력 유형 = "value ="red "onclick ="test4 (this) "/> </html>위의 것은 편집자가 제공하는 스타일과 CSS 스타일을 변경하는 간단한 예제의 전체 내용입니다. 모두가 wulin.com을 더 지원하기를 바랍니다