집 > 기사 > 웹 프론트엔드 > 스타일 객체의 cssText 메소드를 사용하는 방법은 무엇입니까?

스타일 객체의 cssText 메소드를 사용하는 방법은 무엇입니까?

php中世界最好的语言원래의: 2018-02-22 09:35:432204검색

이번에는 스타일 개체의 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!