Rumah > Artikel > hujung hadapan web > Bagaimana javascript memanggil css
Bagaimana javascript memanggil css
- PHPzasal
- 2023-05-16 09:39:07994semak imbas
Dalam reka bentuk dan pembangunan web, JavaScript dan CSS digunakan bersama untuk mencapai pelbagai kesan visual dan ciri interaktif yang menakjubkan. Cara JavaScript memanggil CSS ialah soalan biasa, yang akan diterangkan secara terperinci di bawah.
1. Gaya sebaris
Gaya sebaris boleh digunakan terus pada atribut gaya teg HTML, seperti yang ditunjukkan di bawah:
<p style="color: red; font-size: 16px;">这是一个红色的段落</p>
Dalam JavaScript, anda boleh menukar elemen dengan atribut gaya untuk mengubah suai gaya sebaris. Contohnya:
let p = document.querySelector("p");
p.style.color = "blue";
p.style.fontSize = "20px";Ini akan menjadikan perenggan merah di atas menjadi perenggan biru dengan saiz fon 20px.
2. Helaian gaya luaran
Helaian gaya luaran ialah kaedah meletakkan koleksi peraturan CSS dalam fail berasingan Dengan mengaitkan fail dengan dokumen HTML, helaian gaya yang sama boleh digunakan semula Peraturan gaya. Dalam JavaScript, helaian gaya boleh diubah suai dengan menukar atribut href bagi elemen dalam dokumen yang dipautkan ke helaian gaya. Contohnya:
<link rel="stylesheet" href="styles.css">
let link = document.querySelector("link");
link.href = "new-styles.css";Ini menukar lembaran gaya dalam dokumen yang dipautkan ke styles.css kepada lembaran gaya yang dipautkan ke new-styles.css.
3. Helaian Gaya Dalaman
Helaian gaya dalaman ialah kaedah meletakkan koleksi peraturan CSS antara teg kepala atau badan dokumen HTML. Dalam JavaScript, helaian gaya dalaman boleh diubah suai dengan mengubah suai secara langsung atribut gaya dokumen. Contohnya:
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个红色的段落</p>
</body>let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";Ini akan menjadikan perenggan merah di atas menjadi perenggan biru dengan saiz fon 20px.
4. Nama kelas
Nama kelas ialah nama yang mentakrifkan peraturan gaya untuk elemen tertentu. Dalam JavaScript, satu atau lebih kelas boleh ditambah atau dialih keluar dengan mengubah suai atribut classList sesuatu elemen. Contohnya:
<style>
.red {
color: red;
}
.large {
font-size: 20px;
}
</style>
<p class="red">这是一个红色的段落</p>let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");Ini akan menjadikan perenggan merah di atas menjadi perenggan dengan saiz fon 20px.
Ringkasan:
JavaScript boleh memanggil CSS menggunakan pelbagai kaedah, termasuk gaya sebaris, helaian gaya luaran, helaian gaya dalaman dan nama kelas. Kaedah ini boleh mengendalikan Model Objek Dokumen (DOM) secara langsung melalui JavaScript untuk mencapai kesan visual dan fungsi interaktif. Menguasai kemahiran ini boleh membantu anda mengurus dan mengawal gaya dan tingkah laku halaman web dengan lebih baik.
Atas ialah kandungan terperinci Bagaimana javascript memanggil css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!