js_javascript 기술에서 스타일을 일괄 처리하기 위해 cssText 속성을 영리하게 사용하십시오.

코드 복사 와 같은 HTML 요소에 대한 CSS 속성 설정 코드는 다음과 같습니다.

var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px"
head.style.display = "block ";

쓰기에는 너무 장황합니다. 쉽게 작성하려면

코드 복사와 같은 도구 기능을 작성하세요. 코드는 다음과 같습니다.

function setStyle(obj,css){
for(var atr in css){
obj.style[atr] = css[ atr];
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block "})

cssText 속성이
Google API에서 사용되며 모든 브라우저에서 테스트를 통과한 것으로 확인되었습니다. 코드 한 줄만 있으면 되는데, 정말 멋지네요. 예를 들어

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

var head= document.getElementById ("head") ;
head.style.cssText="width:200px;height:70px;display:bolck";

innerHTML과 마찬가지로 cssText도 빠르며 모든 브라우저에서 지원됩니다. 또한 스타일을 일괄적으로 운영할 때 cssText는 한 번만 리플로우하면 되므로 페이지 렌더링 성능이 향상됩니다.

그러나 cssText에도 단점이 있습니다. 이전 스타일을 덮어쓰게 된다는 것입니다. 예를 들어

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

TEST

이 div에 CSS 속성 너비를 추가하고 싶습니다

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

div.style.cssText = "width:200px;";

너비가 적용되지만 이때 이전 색상을 덮어씁니다. 따라서 cssText를 사용할 때는 오버레이를 사용하여 원래 스타일을 유지해야 합니다.

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

function setStyle(el, strCss){
var sty = el.style;
sty.cssText = sty.cssText strCss;
}

이 방법을 사용하면 IE9/Firefox/Safari/Chrome/Opera에서 문제가 없습니다. , 그러나 IE6/7/8의 cssText 반환 값에 세미콜론이 없기 때문에 실망하게 될 것입니다.

따라서 IE6/7/8은 별도로 처리해야 합니다. cssText 반환값에 ";"이 없으면

코드를 추가하세요. 코드는 다음과 같습니다.

function setStyle(el, strCss){
function endWith(str, suffix) {
var l = str .length - suffix.length ;
return l >= 0 && str.indexOf(suffix, l) == l
}
var sty = el.style,
cssText = sty. cssText;
if (!endsWith(cssText, ';')){
cssText = ';'
}
sty.cssText = cssText
}

관련:

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https:/ / /developer.mozilla.org/en/DOM/CSSStyleDeclaration