JavaScript contoh gaya tetapan dinamik kemahiran analisis

JavaScript contoh gaya tetapan dinamik kemahiran analisis_javascript

WBOY

Lepaskan： 2016-05-16 15:59:31

asal

1336 orang telah melayarinya

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 individu

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.