A-A+

javascript操作元素css属性

2015年10月19日 JavaScript 暂无评论 阅读 76 次

javascript操作元素css属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
//这是逻辑运算符 &&  的用法,&&返回的不一定就是布尔值,如果两边一个是对象,一个是布尔值,则返回

//该对象!如果都是对象,返回第二个!
//本例就是  开始循环 i < length-1 所以 && 这一句不成立就不执行; 当 i==length-1 时候,该语句
//就可以执行,返回后面的语句,即,将那个对象样式还原!
//这里的this代表当前的btn,当this.index等于4时,后面的oDiv.style.cssText = ""这句会执行,刚///开始还没看懂
  changeStyle(oDiv, oAtt[this.index], oVal[this.index])  }  } };
 //  //这里为什么用att[i],val[i]获取不到值呢,求解释(解决方法下面)
//
//
//
</script>
 </head>
 <body>
 <div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
 <input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
 </div>
 </body>
 </html>

拓展: js obj.style.cssText用法详解,cssText添加样式不覆盖简单代码

 //这里为什么用att[i],val[i]获取不到值呢,求解释?闭包问题,你若想直接使用i值,代码如下

<script type="text/javascript">
var change=function(elem,att,val){
    elem.style[att]=val;
}
window.onload=function(){
     var buttons=document.getElementById("me").getElementsByTagName("input");
    var box=document.getElementById("box");
    var att=["height","width","backgroundColor","display","display"];
    var val=["200px","200px","red","none","block"];
    for(var i=0;i<5;i++){
        (function(i){
            buttons[i].onclick=function(){
                change(box,att[i],val[i]);
            }
        })(i)
    }
}
</script>
<div id="box"></div>
<div id="me">
<input type="button" value='set1'  />
<input type="button" value='set2' />
<input type="button" value='set3'  />
<input type="button" value='set4' />
<input type="button" value='set5'  />
</div>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录