Bagaimanakah Saya Boleh Mengubah Pembolehubah CSS Secara Pengaturcaraan dengan JavaScript?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mengubah Pembolehubah CSS Secara Pengaturcaraan dengan JavaScript?

Barbara Streisand

Lepaskan： 2024-12-10 18:35:14

asal

742 orang telah melayarinya

How Can I Programmatically Change CSS Variables with JavaScript?

Menukar Pembolehubah CSS dengan JavaScript

Mengawal warna projek melalui pembolehubah CSS membolehkan penetapan mudah. Walau bagaimanapun, menetapkan pembolehubah ini secara pengaturcaraan boleh mencabar.

Pada mulanya, percubaan dibuat untuk mengubah suai atribut menggunakan setAttribute dan kaedah .css jQuery. Walau bagaimanapun, ini mengakibatkan ralat.

Penyelesaian:

Pembolehubah CSS boleh diedit menggunakan salah satu daripada tiga ini kaedah:

el.style.cssTeks:

document.documentElement.style.cssText = "--main-background-color: red";

Salin selepas log masuk

el.style. setProperty:

document.documentElement.style.setProperty("--main-background-color", "green");

Salin selepas log masuk

el.setAttribute:

document.documentElement.setAttribute("style", "--main-background-color: green");

Salin selepas log masuk

The kaedah terakhir ialah kaedah yang digunakan pada mulanya tetapi dengan sintaks yang salah.

Demo:

Demo ini menunjukkan pembolehubah CSS yang mentakrifkan warna latar belakang, yang diubah oleh JavaScript selepas 2 saat:

<html>
<head>
  <style>
    html {
      --main-background-image: url(../images/starsBackground.jpg);
      --main-text-color: #4CAF50;
      --main-background-color: rgba(0,0,0,.25);
      --beta-background-color: rgba(0,0,0,.85);
    }

    body {
      background-color: var(--main-background-color);
    }
  </style>
</head>
<body onload="setTimeout(function() {
    document.documentElement.style.cssText = '--main-background-color: red';
  }, 2000);">
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Pembolehubah CSS Secara Pengaturcaraan dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!