cari

Rumah >hujung hadapan web >tutorial js >JavaScript contoh gaya tetapan dinamik kemahiran analisis_javascript

JavaScript contoh gaya tetapan dinamik kemahiran analisis_javascript

WBOY
WBOYasal
2016-05-16 15:59:311349semak imbas

Contoh dalam artikel ini menerangkan kaedah menetapkan gaya secara dinamik menggunakan javascript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Pengubahsuaian dinamik gaya

1. Mudah ralat: Mengubah suai gaya elemen bukan untuk menetapkan atribut kelas, tetapi atribut className.
2. Mudah ralat: Gunakan "style.attribute name" untuk mengubah suai atribut gaya secara berasingan Harap maklum bahawa nama atribut dalam CSS adalah dalam JavaScript

Nama atribut mungkin berbeza semasa operasi, terutamanya memfokuskan pada atribut tersebut yang nama atributnya mengandungi -, kerana

Dalam JavaScript - atribut dan nama kelas tidak boleh digunakan. Oleh itu, warna latar belakang dalam CSS ialah background-clolor, manakala dalam JavaScript ia adalah style.background nama gaya elemen adalah kelas, dan dalam JavaScript ia adalah atribut className->style.fontSize; ->gaya .marginTop

3. Ubah suai gaya kawalan secara individua133c2fffc719895a276341b8b5a08c3

1. Contoh 1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

2. Contoh: ubah suai gaya secara dinamik (simulasikan menghidupkan dan mematikan lampu)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

3. Contoh: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数，而不是被响应函数调用
 的函数，所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript 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：Kaedah JavaScript untuk melaksanakan penyeretan lapisan DIV dan secara dinamik menambah kemahiran layers_javascript baharuArtikel seterusnya：Kaedah JavaScript untuk melaksanakan penyeretan lapisan DIV dan secara dinamik menambah kemahiran layers_javascript baharu

Artikel berkaitan

Lihat lagi