다음과 같이 코드 코드를 복사합니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
.낮
{
배경색:흰색;
}
.밤
{
배경색:검정색
}
</style>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
함수 operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "요일") {
divObj.className = "밤";
btnObj.value = "조명을 켜세요";
} 또 다른 {
divObj.className = "요일";
btnObj.value = "조명 끄기";
}
}
//여러 스타일로 구성된 div의 스타일 속성을 일괄 수정합니다.
//방법 1:
함수 methodOne() {
var divObj = document.getElementById("divTest");
divObj.style.BackgroundColor = "파란색";
divObj.style.border = "단색 1px 빨간색";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.BackgroundPosition = "중심";
}
//방법 2:
함수 methodTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "배경색:파란색; 테두리:단색 1px 빨간색; 너비:300px; 높이:200px; 배경-위치:중심";
}
</script>
</head>
<본문>
<form id="form1" runat="서버">
<div id="divContent">
<font color="red">저는 div입니다, 바바바! </font>
</div>
<input type="button" value="조명 끄기" id="btnCommit" onclick="operStyle();"
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<시간 />
<h1>divTest 스타일 수정 및 여러 속성 운영</h1>
<div id="divTest" >
<font color="red">divTest 스타일 수정</font>
</div>
<input type="button" value="divTest 스타일 수정" onclick="methodTwo()" />
</form>
</body>
</html>
js를 사용하여 CSS 스타일을 작성할 때 일반적으로 다음 두 가지 방법을 사용합니다.
일반적으로 js를 사용하여 요소 객체의 스타일을 설정할 때 다음 형식을 사용합니다.
다음과 같이 코드 코드를 복사합니다.
var 요소= document.getElementById("id");
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”단색 1px 빨간색”;
하지만 위의 방법에는 단점이 있는데, 스타일이 많아지면 코드가 많아지는데, JS를 통해 객체의 스타일을 오버라이딩하는 것은 원래 스타일을 파괴하고 다시 빌드하는 일반적인 과정입니다. 브라우저의 부하를 증가시킵니다.
js에는 cssText 메소드가 있습니다.
구문은 다음과 같습니다. obj.style.cssText("style");
위 코드를 다음과 같이 수정할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
element.style.cssText=”너비:20px;높이:20px;테두리:단색 1px 빨간색;”;
이 쓰기 방법을 사용하면 페이지의 여러 리플로우를 방지하고 페이지 성능을 향상시킬 수 있습니다.