집 > 기사 > 웹 프론트엔드 > js에서 CSS 스타일을 수정하는 방법

js에서 CSS 스타일을 수정하는 방법

coldplay.xixi원래의: 2021-04-29 11:41:2819513검색

js에서 CSS 스타일을 수정하는 방법: 1. [obj.className]을 사용하여 스타일 시트의 클래스 이름을 수정합니다. 2. [obj.style.cssTest]를 사용하여 포함된 CSS를 수정합니다. className] 스타일 시트의 클래스 이름을 수정합니다. 외부 링크를 변경하는 CSS를 사용하십시오.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS 스타일을 수정하는 JS 메서드:

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

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

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

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

방법 2: .cssTest를 사용하여 수정합니다. Embedded 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 클래스 이름을 변경하여 스타일을 변경하는 방법에는 두 가지가 있습니다. 스타일 클래스 이름. obj.className = "style2"; 2. obj.setAttribute("class", "style2"); 이러한 방식으로 CSS를 수정하는 것이 위의 방법보다 훨씬 좋습니다. 방법 4. , 외부 CSS 파일을 사용하여 요소의 CSS를 변경하세요

btB의 스타일을 변경하려면 외부 CSS 파일 참조를 변경하세요. 작업은 매우 간단합니다.

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

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

js에서 CSS 스타일을 수정하는 방법

관련 기사