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

php中世界最好的语言
풀어 주다: 2018-02-22 09:35:43
원래의
2225명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿