js에서 CSS 속성을 수정하는 방법

js에서 CSS 속성을 수정하는 방법: 1. "style sheet.style.property="value""의 지정된 내용 구문으로 스타일 스타일을 수정합니다. 2. 구문으로 특정 요소 노드의 스타일 내용을 수정합니다. "element object.style.cssText" ="스타일 값""; 3. setAttribute() 함수를 사용합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

네이티브 JS에서 CSS 속성을 수정하는 방법은 다음 세 가지가 있습니다.

• 스타일 수정
  document.styleSheets[n]을 통해 // n은 수정될 것으로 예상되는 스타일시트의 일련번호를 나타내고, 카운팅은 0부터 시작하여 원하는 수정 스타일 시트를 얻고, cssRules[0]을 통해 스타일 시트의 CSS 내용을 얻고, 스타일을 통해 특정 스타일을 수정합니다. (이 방법은 더 번거로우며 스타일 시트에서 스타일의 순서를 명확하게 지정해야 합니다.)

• 특정 요소 노드의 스타일 내용 수정
  cssText는 여러 CSS 속성을 한 번에 수정할 수 있습니다
  스타일. attrName 단일 속성 값 수정 attrName

• setAttribute

---

HTML code

<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>

CSS code

.test {
   font-size: 30px;
   color: blue;
   background-color: blueviolet
}

JS code

    var testNode = document.getElementsByClassName("test")[0];
    var cssTextBtn = document.getElementsByClassName("cssText")[0];
    var attributeBtn = document.getElementsByClassName("setAttribute")[0];
    var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
    
    // 1. 修改style样式: 
    stylesheetBtn.addEventListener('click', function(e) {
        var stylesheet = document.styleSheets[0];
        stylesheet.cssRules[0].style.backgroundColor = "green";
    }, false);
    
    // 2. 修改特定元素节点的style内容
    cssTextBtn.addEventListener('click', function(e) {
        testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
        testNode.style.border = "1px solid black"
    }, true);
    
    // 3. 通过setAttribute 修改style属性值
    attributeBtn.addEventListener('click', function(e) {
        testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
    }, false)

를 통해 스타일 속성 값 수정 ja Vascript 고급 튜토리얼 】

위 내용은 js에서 CSS 속성을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!