Bolehkah javascript mengubah gaya halaman web?

Javascript boleh menukar gaya halaman web Kaedah: 1. Gunakan pernyataan "elemen object.style.cssTest="style value"" untuk mengubah suainya; "kelas", "nilai" )" pengubahsuaian pernyataan; 3. Ubah suai gaya halaman web dengan menukar fail css luaran.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Javascript boleh menukar gaya halaman web.

Dalam javascript, anda boleh menukar gaya halaman web dengan mengubah suai kod CSS secara dinamik.

Cara mengubah suai kod CSS dengan JavaScript

1. Gunakan setAttribute() untuk mengubah suai nama kelas helaian gaya.

2. Gunakan cssTest objek gaya untuk mengubah suai css terbenam.

3. Tukar css elemen dengan menukar fail css luaran

Contoh:

Berikut ialah sekeping kod html dan kod css untuk menerangkan perbezaan antara kaedah di atas.

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
}

kod 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>

Kaedah 1. Gunakan obj.style.cssTest untuk mengubah suai css terbenam

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

Kaedah 2. Gunakan bj.setAttribute untuk mengubah suai nama kelas helaian gaya

Gunakan kod untuk mengubah suai nama kelas gaya rujukan btB, seperti yang ditunjukkan dalam Kod perenggan berikut:

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

Tukar gaya dengan menukar nama kelas css btB Terdapat dua cara untuk menukar nama kelas gaya. 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

Mengubah suai css dengan cara ini adalah lebih baik daripada yang di atas.

Kaedah 3: Tukar css elemen dengan menukar fail css luaran

Tukar gaya btB dengan menukar rujukan fail css luaran, operasi Sangat ringkas. Kodnya adalah seperti berikut:

Pertama, anda mesti memetik fail css luaran, kodnya adalah seperti berikut:

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

[Cadangan berkaitan: tutorial video javascript , bahagian hadapan web】

Atas ialah kandungan terperinci Bolehkah javascript mengubah gaya halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!