JavaScript動態設定div的樣式的方法_javascript技巧
- WBOY原創
- 2016-05-16 15:23:171273瀏覽
有時候需要根據需要動態設定div的樣式，當然對於稍有經驗的javascript開發者來說，這一切都是那麼的簡單，但是對於初學者或者說沒有相關經驗的開發者來說可能就是一個不大不小的難關，以下就透過實例簡單介紹如何實現此效果。
程式碼實例如下:
<!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>
以上程式碼實作了我們的要求，不過是用了兩種方法，一種是style方式，一種是className方式。
特別注意:
1.使用style時，像background-color這種符合單字屬性要使用駝峰寫法（第二個單字首字母大寫），寫成backgroundColo這種形式。
2.使用className時，屬性值是class樣式名稱，但前面不能加點(.)。
PS：JavaScript動態改變div屬性的實作方法
本文實例講述了JavaScript動態改變div屬性的實作方法。分享給大家供大家參考。具體如下：
這裡可以透過JS動態改變div屬性，樣式等
<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>
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn