js css 스타일 연산 코드(일괄 연산)_javascript 기술

js를 사용하여 CSS 스타일을 작성할 때 일반적으로 다음 두 가지 방법을 사용합니다.

일반적으로 js를 사용하여 요소 개체의 스타일을 설정할 때 다음 형식을 사용합니다.

코드 복사 코드는 다음과 같습니다.

var element= document.getElementById(”id”)
element .style.width=”20px” ;
element.style.height=”20px”;
element.style.border=”solid 1px red”; 그러나 위의 방법은 단점이 있고, 스타일이 너무 많습니다. 코드가 많고, JS를 통해 객체의 스타일을 덮어쓰는 것은 원래 스타일을 파괴하고 다시 빌드하는 일반적인 과정이므로 브라우저의 오버헤드가 증가합니다.

js에는 cssText 메서드가 있습니다.
구문은 다음과 같습니다. obj.style.cssText("style")
위 코드를 다음과 같이 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.element.style.cssText=”width:20px;height:20px;border :solid 1px red ;";

이 쓰기 방법은 페이지의 다중 리플로우를 방지하고 페이지 성능을 향상시킬 수 있습니다.