자바스크립트에서 CSS를 설정하는 방법

JavaScript로 CSS를 설정하는 방법: 1. 인라인 스타일을 통해 스타일 개체를 직접 설정합니다. 2. 전역 스타일을 추가하여 스타일 속성을 설정합니다. 3. JavaScript를 사용하여 "add()" 및 "remove(" 클래스를 추가하고 삭제합니다. )"을 사용하여 CSS를 설정합니다.

이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&HTML5&&CSS3 버전, Dell G3 컴퓨터.

Javascript는 CSS 스타일을 설정합니다

1. 스타일 객체를 직접 설정합니다(인라인 스타일)

JavaScript를 사용하여 요소의 스타일을 설정하는 가장 쉬운 방법은 style 속성을 사용하는 것입니다. JavaScript를 통해 액세스하는 모든 HTML 요소에는 스타일 개체가 있습니다. 이 객체를 사용하면 CSS 속성을 지정하고 해당 값을 설정할 수 있습니다. 예를 들어, 다음은 ID 값 데모를 사용하여 HTML 요소의 글꼴 색상과 배경색을 설정하는 스타일입니다.

var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';  
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  
// 将高度设置为150 px
elem.style.height = '150px';

참고: JavaScript는 대시(배경색) 대신 카멜 케이스 원칙(예: backgroundColor)을 사용합니다. 속성 이름을 나타냅니다

style 속성은 요소에 스타일을 인라인으로 추가합니다:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

그러나 이는 마크업을 매우 혼란스럽게 만들 수 있습니다. 브라우저 렌더링 성능도 좋지 않습니다.

2. 스타일 속성 설정 - 전역 스타일 추가

또 다른 방법은 에 CSS 속성이 있는 요소를 삽입하는 것입니다. 이는 하나의 요소가 아닌 요소 그룹에 적용되는 스타일을 설정할 때 유용합니다.

먼저 스타일 요소를 생성하겠습니다.

var style = document.createElement('style');

다음으로 innerHTML을 통해

var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';

마지막으로 DOM에 스타일을 주입하겠습니다. 이를 위해 DOM에서 찾은 첫 번째 스크립트 태그를 가져오고 insertBefore()를 사용하여 스타일 태그를 추가합니다.

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. JavaScript를 사용하여 클래스 추가 및 제거: add() 및 제거() [권장 학습: javascript 고급 튜토리얼]

이 방법에는 클래스 값을 추가하고 제거하는 작업이 포함되며, 이로 인해 애플리케이션 스타일이 변경됩니다. 규칙. 예를 들어 다음과 같은 스타일 규칙이 있다고 가정해 보겠습니다.

.disableMenu {
    display: none;
}

HTML에는 dropDown이라는 ID가 있는 메뉴가 있습니다.

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

이제 이 요소에 .disableMenu 스타일 규칙을 적용하려면 All이 필요합니다. 그 방법은 dropDown 요소에 클래스 값으로 비활성화 메뉴를 추가하는 것입니다.

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript를 사용하여 동일한 결과를 얻으려면 classList API를 사용합니다. 이 API를 사용하면 HTML 요소에서 클래스 값을 추가하거나 제거하는 것이 매우 간단해집니다.

dropDown 요소에 비활성화 메뉴 클래스 이름을 추가하려면 HTML 요소의 classList 속성에 add() 메서드를 사용하세요.

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

비활성화 메뉴 클래스 이름을 제거하려면 classList API의 제거() 메서드를 호출하면 됩니다. :

아아아아

위 내용은 자바스크립트에서 CSS를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!