이번에는 스타일 개체의 cssText 메서드를 사용하는 방법과 스타일 개체의 cssText 메서드를 사용할 때 어떤 주의사항이 필요한지 알려드리겠습니다.
cssText의 본질은 무엇인가요?
cssText의 핵심은 HTML 요소의 스타일 속성 값을 설정하는 것입니다.
cssText를 사용하는 방법은 무엇입니까?
domElement.style.cssText = "color:red; font-size:13px;";
cssText의 반환 값은 무엇입니까?
일부 브라우저(예: Chrome)에서는 할당한 값이 반환됩니다. IE에서는 출력 형식을 지정하고, 속성의 순서를 변경하고 마지막 세미콜론을 제거합니다. 예:
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText);
IE의 값은 FONT-SIZE: 13px입니다. ; COLOR : red
cssText 사용의 장점
일반적으로 js를 사용하여 요소 개체의 스타일을 설정할 때 다음 형식을 사용합니다.
var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;
스타일이 더 많으면 코드가 많아집니다. JS를 통해 객체의 스타일을 덮어쓰는 것이 일반적입니다. 원래 스타일을 파괴하고 재구성하는 과정은 브라우저의 오버헤드를 증가시킵니다.
js에는 cssText 메소드가 있습니다:
domElement.style.cssText=”样式”; domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
이 방법으로 페이지 리플로우를 방지하고 페이지 성능을 향상시킬 수 있습니다.
그러나 문제가 발생합니다. 원래 cssText가 지워집니다. 예를 들어 원래 스타일에 'display:none;'이 있으면 위 JS를 실행한 후 표시가 삭제됩니다.
이 문제를 해결하려면 cssText 축적 방법을 사용할 수 있습니다:
domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’
게다가 앞에 div { text-꾸밈:underline }이라고 적힌 스타일 시트 파일이 있으면 덮어쓰게 됩니까? ? 습관! HTML 요소의 스타일 속성에 직접적으로 영향을 미치지 않기 때문입니다.
특정 사례 분석:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>控制div属性</title> <style> #outer{width:500px;margin:0 auto;padding:0;text-align:center;} #div1{width:100px;height:100px;background:black;margin:10px auto;display:block;} </style> <script> var changeStyle = function (elem, attr, value) { elem.style[attr] = value }; window.onload = function () { var oBtn = document.getElementsByTagName("input"); var oDiv = document.getElementById("div1"); var oAtt = ["width","height","background","display","display"]; var oVal = ["200px","200px","red","none","block"]; for (var i = 0; i < oBtn.length; i++) { oBtn[i].index = i; oBtn[i].onclick = function () { this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); changeStyle(oDiv, oAtt[this.index], oVal[this.index]) } } }; </script> </head> <body> <div id="outer"> <input type="button" value="变宽" /> <input type="button" value="变高" /> <input type="button" value="变色" /> <input type="button" value="隐藏" /> <input type="button" value="重置" /> <div id="div1"></div> </div> </body> </html>
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
관련 읽기:
html, xhtml 및 xml의 차이점은 무엇입니까?
iframe의 하위 페이지를 작동하여 상위 페이지의 페이지 팝업 레이어 효과를 차단하는 방법
위 내용은 스타일 객체의 cssText 메소드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!