Cara untuk menetapkan gaya div secara dinamik dengan kemahiran JavaScript

Cara untuk menetapkan gaya div secara dinamik dengan kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:23:17

asal

1276 orang telah melayarinya

Kadang-kadang anda perlu menetapkan gaya div secara dinamik mengikut keperluan Sudah tentu, untuk pembangun javascript yang berpengalaman, ini semua sangat mudah, tetapi untuk pemula atau pembangun tanpa pengalaman yang relevan, ia mungkin bukan besar atau kecil. kesukaran. Mari kita perkenalkan secara ringkas bagaimana untuk mencapai kesan ini melalui contoh.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>动态设置div的样式</title>
<style type="text/css">
div{
 width:50px;
 height:50px;
 background:red;
 margin-top:10px;
}
.bg{
 background-color:blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var firstDiv=document.getElementById("firstDiv");
 var secondDiv=document.getElementById("secondDiv");
 var first=document.getElementById("first");
 var second=document.getElementById("second");
 first.onclick=function(){
   firstDiv.style.backgroundColor="green";
 }
 second.onclick=function(){
   secondDiv.className="bg";
 }
}
</script>
</head>
<body>
<div id="firstDiv"></div>
<div id="secondDiv"></div>
<input type="button" value="使用style方式" id="first" />
<input type="button" value="使用className方式" id="second" />
</body>
</html>

Salin selepas log masuk

Kod di atas mencapai keperluan kami, tetapi menggunakan dua kaedah, satu kaedah gaya dan satu lagi kaedah className.

Nota Khas:

1. Apabila menggunakan gaya, atribut perkataan seperti warna latar belakang hendaklah ditulis dalam huruf besar unta (huruf pertama perkataan kedua ditulis dengan huruf besar) dan ditulis dalam bentuk backgroundColo.

2. Apabila menggunakan className, nilai atribut ialah nama gaya kelas, tetapi titik (.) tidak boleh ditambah di hadapan.

PS: Cara menukar atribut div secara dinamik menggunakan JavaScript

Contoh dalam artikel ini menerangkan kaedah pelaksanaan menukar atribut div secara dinamik dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini anda boleh menukar atribut, gaya, dsb. div secara dinamik melalui JS

<script type="text/javascript">
 var oBox = document.getElementById('box');
 var oDiv = document.getElementById('div1');
 var aInput = document.getElementsByTagName('input');
 var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
 var aValue = ['200px', '200px', 'red', 'none', 'block'];
 for(var len=aInput.length,i=0;i<len;i++){
  aInput[i].index = i; //索引
  aInput[i].onclick = function(){
   //重置按钮,cssText清空DIV属性
   if(this.index == aInput.length - 1)oDiv.style.cssText = "";
   //设置DIV属性
   property(oDiv, aAttr[this.index], aValue[this.index]);
  };
 }
 //控制DIV属性
 function property(obj, attr, value){
  obj.style[attr] = value;
 }
</script>

Salin selepas log masuk

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