Rumah > Artikel > hujung hadapan web > Cara untuk menetapkan gaya div secara dinamik dengan kemahiran JavaScript_javascript

Cara untuk menetapkan gaya div secara dinamik dengan kemahiran JavaScript_javascript

WBOYasal: 2016-05-16 15:23:171257semak imbas

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>

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>

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：JavaScript asli melaksanakan kemahiran layout_javascript aliran air terjunArtikel seterusnya：JavaScript asli melaksanakan kemahiran layout_javascript aliran air terjun

Artikel berkaitan

Lihat lagi