A-A+

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

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

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

<title>控制div属性所引发的js之obj.style.cssText风暴</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_r("input");
   var oDiv = document.getElementByIdx_x_x_x("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 = "");  //这里的this代表当前的btn,当this.index等于4时,后面的oDiv.style.cssText = ""这句会执行,刚开始还没看懂
           changeStyle(oDiv, oAtt[this.index], oVal[this.index])
       }
   }
   //测试
   var arr = {'a':'100','b':'200'};
   //alert(typeof(arr));  //object
   //alert(arr['b']);  //200
   //alert(arr.a);  //100
   var oDiv2 = document.getElementByIdx_x_x_x('div2');
   changeStyle2(oDiv2,'width:100px;height:300px;');
   changeStyle2(oDiv2,'border:solid 2px blue;');
};
function changeStyle2(elem,strCss){
   elem.style.cssText = strCss+elem.style.cssText;
}
//1、如果div2的样式不是行内样式,那么elem.style.cssText就获取不到div2原来的样式

//2、如果样式不是行内样式,elem.style.cssText = "" 赋值也不会全部覆盖以前的样式,只会覆盖你想要覆盖的样式,
// 如:#div2{background:bule;} elem.style.cssText = 'width:100px;height:300px;' 那么修改之后,div2的样式是{background:bule;width:100px;height:300px;}

//如果样式 是行内样式<div id="div2" style="background:red;"></div>那么elem.style.cssText = 'width:100px;height:300px;'就会覆盖以前的background:bule;修改之后得到的样式是 {width:100px;height:300px;}

//所以,上面的elem.style.cssText = strCss+elem.style.cssText;写法是正确的哦。。。
</script>


<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 id="div2" style="background:red;"></div>
</div>

标签:

给我留言

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

用户登录