cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript mengawal halaman web-CSS dan kemahiran DOM_javascript

JavaScript mengawal halaman web-CSS dan kemahiran DOM_javascript

WBOY
WBOYasal
2016-05-16 15:08:231335semak imbas

Bacaan yang disyorkan: Halaman Web Kawalan JavaScript - DOM

DOM ialah kaedah manipulasi HTML yang mematuhi piawaian World Wide Web Ia boleh mencapai lebih banyak fungsi manipulasi daripada ciri innerHTML

Berikut ialah kod HTML dan kod CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

Atribut nod className mencapai perubahan gaya dramatik dengan menukar keseluruhan kelas gaya nod

DOM menyediakan akses kepada kelas gaya elemen melalui atribut className atribut nod 

alert(document.getElementById(“span1”).className);

Lengkapkan transformasi penampilan elemen dengan menukar nama kelas gaya CSS 

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

Begitu juga, kami juga boleh menggunakan acara onmouseover() dan onmouseout() untuk mengawal gaya elemen 

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

Walaupun kesan ini secara amnya dikawal dengan CSS, di sini kami hanya menumpukan pada aplikasi alat ini dan anda hanya boleh mengikuti analogi

Kelas gaya CSS langsung tiada kaitan dengan kelas Javascript - ia adalah perkara yang sama sekali berbeza

Dengan mengakses atribut gaya tunggal nod, atribut nod gaya mencapai sejumlah kecil perubahan gaya

Atribut Gaya nod menyediakan akses kepada atribut gaya tunggal

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

style="visibility:hidden" menunjukkan bahawa elemen itu tersembunyi

Elemen halaman web boleh dipaparkan atau disembunyikan secara dinamik menggunakan ciri gaya keterlihatan objek elemen (display:none/display:block juga boleh menyembunyikan dan memaparkan elemen)

DOM boleh mencipta sebarang elemen HTML sesuka hati, termasuk perenggan teks

document.createElement() digunakan untuk mencipta teg HTML dan parameternya ialah nama teg

document.createElement("p") mencipta tag p

Satu lagi: document.createTextNode() digunakan untuk mencipta perenggan teks dan parameternya ialah kandungan teks

var pElem=document.createElement(“p”);//Buat teg P

pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//Tambah teks sub-elemen pada tag P

document.getElementById("span1").appendChild(pElem);//Tambah teg P dan sub-elemennya pada teg span1

Lampiran:

Menggunakan kaedah createElement() objek dokumen, anda boleh mencipta sebarang elemen HTML

Jika anda perlu menambah kandungan teks pada elemen, anda mesti mencipta subelemen kandungan teks dan menambahkannya pada elemen

Dengan menambah dan mengalih keluar nod dengan teliti dalam pepohon DOM, halaman web boleh dibongkar dan disusun semula sesuka hati

Ini ialah pengenalan JavaScript untuk mengawal halaman web-CSS dan DOM Saya harap ia akan membantu semua orang!

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：Pemalam kaca pembesar ditulis berdasarkan jquery_jqueryArtikel seterusnya：Pemalam kaca pembesar ditulis berdasarkan jquery_jquery

Artikel berkaitan

Lihat lagi