CSS 스타일을 js로 바꾸는 방법

css 스타일을 js로 바꾸는 방법: 1. obj.className을 사용하여 스타일 시트의 클래스 이름을 수정합니다. 2. obj.style.cssText를 사용하여 포함된 CSS를 수정합니다. 3. obj.className을 사용하여 클래스를 수정합니다. 4. 외부 CSS 파일을 변경합니다.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

CSS 스타일을 js로 바꾸는 방법은 무엇입니까?

동적으로 수정되는 CSS 스타일 메소드에 대한 javascript 요약 - 네 가지 메소드

특정 특수 효과를 얻으려면 Javascript를 사용하여 특정 태그의 CSS 속성을 동적으로 변경해야 합니다. CSS를 동적으로 수정하는 방법입니다. 스타일? 이 문제에 직면하면 편집자는 JavaScript를 사용하여 CSS 스타일을 동적으로 수정하는 문제를 해결하도록 안내할 것입니다. 친구 여러분, 와서 배워 보세요

많은 경우 웹 페이지 요소의 스타일을 동적으로 수정해야 합니다. JavaScript는 스타일을 동적으로 수정하는 여러 가지 방법을 제공하며 해당 방법의 사용, 효과 및 결함은 아래에 소개됩니다.

1. 스타일 시트의 클래스 이름을 수정하려면 obj.className을 사용하세요.
2. 내장된 CSS를 수정하려면 obj.style.cssText를 사용하세요.
3. 스타일 시트의 클래스 이름을 수정하려면 obj.className을 사용하세요.
4. 외부 CSS 파일을 사용하여 요소의 CSS를 변경하세요

다음은 위 방법의 차이점을 설명하는 HTML 코드와 CSS 코드입니다.

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }
 
.style1:hover{ background-color:#66B3FF; cursor:pointer;}
 
.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }
 
.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

<p>
 <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
 <p id="tool">
  <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
  <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
  <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
  <input type="button" value="更改外联css样式" onclick="recover()" />
 </p>
</p>

방법 1. obj.className을 사용하여 스타일 시트의 클래스 이름을 수정합니다.

아래 코드에서 ob.style.cssText가 btnB 스타일에서 어떻게 나오는지 확인할 수 있습니다.

function changeStyle1() {
  var obj = document.getElementById("btnB");
  obj.style.backgroundColor= "black";
}

이 코드는 btB의 텍스트 색상을 수정합니다. 브라우저에서 디버깅 도구를 열면 btB 태그 [style="inline>outline. 그리고 btB의 hove pseudo-class 배경에 추가 속성이 있습니다. -color 스타일은 인라인으로 작성되므로 포함된 배경색이 의사 클래스를 덮어 btB에 마우스를 놓을 때 배경색이 변경되지 않게 합니다.

방법 2: obj.style을 사용하여 포함된 CSS를 수정합니다.

JavaScript 코드 직접 업로드:

function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black;
   display:block;
   color:White;
}

이 코드의 효과는 [1]과 동일하며 결함도 동일합니다.

방법 3. obj.className을 사용하여 스타일 시트의 클래스를 수정합니다. Name

다음 코드와 같이 코드를 사용하여 btB 참조 스타일의 클래스 이름을 수정합니다.

function changeStyle3() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

btB CSS의 클래스 이름을 변경하여 스타일을 변경합니다. 스타일 클래스 이름을 변경하는 방법에는 두 가지가 있습니다. . obj.className. = "style2";
2, obj.setAttribute("class", "style2");
모두 동일한 효과를 갖습니다.
이런 방식으로 CSS를 수정하는 것이 위의 방법보다 훨씬 좋습니다.

방법 4 . 외부 CSS 파일을 사용하여 요소의 CSS를 변경합니다.

외부 CSS 파일 참조를 변경하여 btB의 스타일을 변경하는 것은 매우 간단합니다.

먼저 외부 CSS를 참조해야 합니다. 파일의 코드는 다음과 같습니다.

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
}

이 방법도 btB의 스타일을 쉽게 변경할 수 있습니다. 개인적으로 이 방법이 전체 페이지 스키닝을 달성하는 데 가장 유용하고 가장 좋은 방법이라고 생각합니다.

[추천 학습:

기본 JavaScript. 튜토리얼]

위 내용은 CSS 스타일을 js로 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!