자바스크립트가 웹페이지 스타일을 변경할 수 있나요?

Javascript는 웹 페이지의 스타일을 변경할 수 있습니다. 방법: 1. "Element Object.style.cssTest="Style Value"" 문을 사용하여 수정합니다. 2. "Element Object.setAttribute("class", "value")" 문을 수정합니다. ;3. 외부 CSS 파일을 변경하여 웹페이지 스타일을 수정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript는 웹 페이지의 스타일을 변경할 수 있습니다.

자바스크립트에서는 CSS 코드를 동적으로 수정하여 웹페이지 스타일을 변경할 수 있습니다.

javascript로 CSS 코드를 수정하는 방법

1. 스타일 시트의 클래스 이름을 수정하려면 setAttribute()를 사용하세요.

2. 스타일 개체의 cssTest를 사용하여 포함된 CSS를 수정합니다.

3. 외부 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: 10px25px;
    font - size: 18px;
}
.style2: hover {
    background - color: black;
    color: White;
    cursor: pointer
}

html 코드:

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div 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()" /></div>
</div>

방법 1, obj.style.cssTest를 사용하여 내장된 CSS 수정

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

방법 2, bj.setAttribute를 사용하여 스타일 시트의 클래스 이름 수정

다음 코드 조각과 같이 코드를 사용하여 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");

이런 식으로 CSS를 수정하는 것이 위의 것보다 훨씬 좋습니다.

방법 3: 외부 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");
 }

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

위 내용은 자바스크립트가 웹페이지 스타일을 변경할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!