Bagaimana untuk Menetapkan Sifat CSS Secara Dinamik untuk Elemen `` Dicipta dalam JavaScript?

Cara Menetapkan Sifat CSS dalam JavaScript

Apabila bekerja dengan DOM dalam JavaScript, selalunya perlu memanipulasi sifat CSS elemen. Ini termasuk menetapkan atribut seperti lebar, tinggi, warna dan banyak lagi.

Soalan:

Andaikan anda telah mencipta elemen secara dinamik menggunakan document.createElement('select'). Bagaimanakah anda menetapkan atribut CSS, seperti lebar: 100px, menggunakan JavaScript?

Jawapan:

Untuk menetapkan sifat CSS dalam JavaScript, anda boleh menggunakan sifat gaya bagi unsur tersebut. Begini cara anda melakukannya dalam kes anda:

<code class="javascript">var menu = document.createElement('select');
menu.style.width = "100px";</code>

Ini akan secara dinamik menetapkan lebar elemen kepada 100 piksel menggunakan JavaScript. Anda boleh menggunakan mana-mana sifat CSS yang disokong dengan cara ini, seperti ketinggian, warna latar belakang, saiz fon dan sebagainya.

Perhatikan bahawa sifat gaya ialah objek CSSStyleDeclaration yang membolehkan anda memanipulasi gaya individu atau mendapatkan nilai semasa mereka. Anda juga boleh menggunakannya untuk menetapkan berbilang gaya sekali gus dengan menghantar objek:

<code class="javascript">menu.style = {
  width: "100px",
  height: "200px",
  backgroundColor: "blue",
};</code>

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Sifat CSS Secara Dinamik untuk Elemen `` Dicipta dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css Object for select using Property dom this background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Melaksanakan Hashmap dengan Cekap dalam JavaScript?Artikel seterusnya：Bagaimana untuk Melaksanakan Hashmap dengan Cekap dalam JavaScript?

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved