js는 CSS를 동적으로 수정합니다.

프런트엔드 기술의 지속적인 발전으로 JavaScript는 웹 개발에 없어서는 안 될 부분이 되었습니다. JavaScript에서는 CSS 스타일을 동적으로 수정하는 것이 일반적인 요구 사항 중 하나입니다. 마우스를 움직일 때 나타나는 특수 효과, 페이지를 스크롤할 때 탐색 표시줄 색상이 변경되는 등 다양한 멋진 효과를 얻을 수 있습니다. 이 기사에서는 JavaScript에서 CSS 스타일을 동적으로 수정하는 방법을 자세히 소개합니다.

1. JavaScript를 사용하여 요소 스타일 수정

HTML에서는 요소에 CSS 스타일을 추가하여 페이지를 아름답게 꾸밀 수 있습니다. JavaScript에서는 요소의 속성을 수정하여 스타일을 동적으로 수정하는 효과를 얻을 수 있습니다.

1. 요소의 스타일 속성을 사용하세요

HTML 요소의 스타일 속성을 사용하여 요소의 스타일을 직접 수정할 수 있습니다. 이 방법은 단일 요소의 스타일을 수정하는 데 적합합니다.

샘플 코드:

<div id="box" style="background-color: green;">我是一段文本</div>

JavaScript에서는 스타일 속성을 가져와 요소의 스타일을 동적으로 수정할 수 있습니다.

var box = document.querySelector('#box');
box.style.backgroundColor = 'red';

JavaScript를 통해 스타일을 수정하면 요소의 스타일이 빨간색으로 변합니다.

2. 요소의 스타일 요소 사용

요소의 스타일을 동적으로 수정하는 또 다른 방법은 요소의 스타일 요소를 사용하는 것입니다. 스타일 요소를 사용하면 JavaScript에서 해당 요소의 스타일 시트에 직접 액세스하여 해당 스타일을 수정할 수 있습니다.

샘플 코드:

<div id="box"></div>

<style>
    #box {
        background-color: green;
    }
</style>

JavaScript에서는 스타일 속성을 가져와 요소의 스타일 요소를 가져온 다음 해당 스타일을 동적으로 수정할 수 있습니다.

var box = document.querySelector('#box');
var styles = box.style;

// 修改样式
styles.backgroundColor = 'red';

JavaScript를 통해 스타일을 수정하면 요소의 스타일이 빨간색으로 변합니다.

2. classList를 사용하여 스타일 수정

위에 소개된 두 가지 방법은 웹 페이지에서 여러 요소의 스타일을 마음대로 제어해야 하는 경우에 적합합니다. 너무 귀찮다. 이 시점에서 classList 속성을 사용하여 스타일을 동적으로 수정할 수 있습니다.

1. 클래스 추가 및 삭제

classList 속성에는 클래스를 쉽게 추가하고 삭제할 수 있는 편리한 메서드가 많이 포함되어 있습니다. 클래스를 사용하면 요소에 대한 스타일 세트를 정의하고 JavaScript를 통해 동적으로 스타일을 추가하거나 제거할 수 있습니다.

샘플 코드:

<div class="box">我是一段文本</div>

JavaScript에서는 classList의 add() 및 Remove() 메서드를 통해 요소에서 클래스를 추가하거나 제거할 수 있습니다.

var box = document.querySelector('.box');
box.classList.add('red');
box.classList.remove('box');

JavaScript를 통해 스타일을 수정하면 요소의 스타일이 빨간색으로 변하고, 요소의 상자 클래스가 삭제됩니다.

2. 클래스 전환

add() 및 제거() 메서드 외에도 classList에는 토글()이라는 편리한 메서드도 있습니다. 토글() 메소드는 요소의 클래스를 전환할 수 있습니다. 클래스가 요소에 이미 존재하는 경우 메소드는 클래스를 삭제하고, 그렇지 않으면 클래스를 추가합니다.

샘플 코드:

<div class="box">我是一段文本</div>

JavaScript에서는 classList의ggle() 메서드를 통해 요소의 클래스를 전환할 수 있습니다.

var box = document.querySelector('.box');
box.classList.toggle('red');
box.classList.toggle('green');

JavaScript를 통해 스타일을 수정하면 요소의 스타일이 빨간색에서 녹색으로 변경됩니다.

3. 스타일 시트 직접 수정

위의 방법은 단일 요소 또는 여러 요소의 스타일을 제어할 수 있지만, 스타일 시트를 직접 수정해야 하는 경우에는 다른 방법을 사용해야 합니다.

JavaScript에서 스타일 시트는 객체로 표현되며 JavaScript 코드를 통해 스타일 시트를 동적으로 수정하여 스타일 시트를 동적으로 수정할 수 있습니다.

샘플 코드:

<div class="box">我是一段文本</div>

JavaScript에서는 스타일 시트에 해당하는 객체를 가져와 동적으로 스타일을 수정할 수 있습니다.

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;

for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    if (rule.selectorText === '.box') {
        rule.style.backgroundColor = 'red';
    }
}

JavaScript를 통해 스타일을 수정하면 요소의 스타일이 빨간색으로 변합니다.

4. 요약

이 글에서는 요소의 style 속성 사용, 요소의 스타일 요소 사용, classList 사용 등 CSS 스타일을 동적으로 수정하는 세 가지 방법을 소개합니다. 또한, 스타일시트를 직접 수정해야 하는 필요성을 충족시키기 위해 스타일시트를 직접 수정하는 방법도 도입했습니다. 이러한 방법을 사용하면 JavaScript에서 CSS 스타일을 동적으로 수정하는 기능을 쉽게 구현할 수 있습니다.

위 내용은 js는 CSS를 동적으로 수정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!