자바스크립트 수정 CSS 스타일 예제 코드 4개 추천-JS 튜토리얼-php.cn

자바스크립트 수정 CSS 스타일 예제 코드 4개 추천

伊谢尔伦

풀어 주다： 2017-07-19 16:48:59

원래의

1378명이 탐색했습니다.

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

1. 스타일 시트의 클래스 이름을 수정하려면 obj.className을 사용하세요.

2. 내장된 CSS를 수정하려면 obj.style.cssTest를 사용하세요.

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.cssTest btnB의 스타일을 생각해내는 방법.

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

 }

로그인 후 복사

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

방법 2. obj.style.cssTest를 사용합니다. 포함된 CSS 수정

JavaScript 코드 직접 업로드:

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

}

로그인 후 복사

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

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

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

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

로그인 후 복사

btB CSS의 클래스 이름을 변경하여 스타일을 변경합니다. 스타일 클래스 이름을 변경하는 방법 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2"); 위의 방법을 사용하면 됩니다. 효과가 훨씬 좋습니다.

방법 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");
 }

로그인 후 복사

위 내용은 자바스크립트 수정 CSS 스타일 예제 코드 4개 추천의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!