JS 배치 작업_javascript 기술의 CSS 속성에 대한 자세한 분석

复主代码 代码如下: .day { 배경색:흰색; } .night { 배경색:검정 } function operStyle() { var divObj = document.getElementById("divContent"); var btnObj = document.getElementById("btnCommit"); if (divObj.className == "day") { divObj.className = "night"; btnObj.value = "开灯"; } else { divObj.className = "day"; btnObj.value = "关灯"; } } //批改div의 样式属性,由多种样式构成 //방법1： function methodOne() { var divObj = document.getElementById("divTest"); divObj.styleColor = "blue"; divObj. style.border = "단색 1px 빨간색"; divObj.style.width = "300px"; divObj.style.height = "200px"; divObj.style.BackgroundPosition = "center"; } //방법2： function methodTwo() { var divObj = document.getElementById("divTest"); divObj.style.cssText = " 배경색:파란색; 테두리:단색 1px 빨간색; 너비:300px; 높이:200px; background-position:center"; } 我是一个div啊，咿呀咿呀呦！

修改divTest的样式，多属性操作 修改divTest的样式 js를 사용하여 CSS 스타일을 작성할 때 일반적으로 다음 두 가지 방법을 사용합니다. 일반적으로 js를 사용하여 요소 개체의 스타일을 설정할 때 다음 형식을 사용합니다. 다음과 같이 코드를 복사합니다. var element= 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="width:20px;height:20px;border:solid 1px red;"; 이러한 작성 방법은 페이지의 여러 리플로우를 방지하고 페이지 성능을 향상시킬 수 있습니다.