JS问题，求问更改css属性的问题。XX.style.background="red"不是正确的吗？这里怎么不行
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content...
<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;////////////////////////////////////////////////这里问什么不可以换成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 = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</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" style="display: block;"></div>
</div>
</body></html>
代码中注释的地方是具体问题，跪求大神 展开
<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;////////////////////////////////////////////////这里问什么不可以换成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 = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</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" style="display: block;"></div>
</div>
</body></html>
代码中注释的地方是具体问题，跪求大神 展开
2个回答
展开全部
style[] 其实就是返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
其实我们直接用.XXX去做一个样式的改变时候 就像我们用window.onload 一样 调用了window对象的onload方法，当然我们用.去直接调用对象中的方法或者内容的时候是严格区分大小的。
其实主要的问题是style. 后面的参数在js内部虚拟机的解析问题，因为你是通过来的参数
就是好比arr 就是width
obj.style.arr = '1px';
这里的arr js会认为arr是css对象中的一个属性
obj.style[arr] = '1px'
这里的arr js会将arr实意后找到css对象中的属性
当然这样也是不行的
obj.style['arr'] = '1px'
我也不知道楼主能不能懂，但是就是这么一个意思，如果楼主质执意要用style.width = xx;
可以用过switch进行设置
switch(arr)
case 'width' : obj.style.width = '1px';
其实我们直接用.XXX去做一个样式的改变时候 就像我们用window.onload 一样 调用了window对象的onload方法，当然我们用.去直接调用对象中的方法或者内容的时候是严格区分大小的。
其实主要的问题是style. 后面的参数在js内部虚拟机的解析问题，因为你是通过来的参数
就是好比arr 就是width
obj.style.arr = '1px';
这里的arr js会认为arr是css对象中的一个属性
obj.style[arr] = '1px'
这里的arr js会将arr实意后找到css对象中的属性
当然这样也是不行的
obj.style['arr'] = '1px'
我也不知道楼主能不能懂，但是就是这么一个意思，如果楼主质执意要用style.width = xx;
可以用过switch进行设置
switch(arr)
case 'width' : obj.style.width = '1px';
追问
看了两遍我懂了，大谢！解决了我好久的疑问，为了回答我的问题打了这么多字，谢谢！
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.getElementById("xx").style.backgroundColor="#f00"; 这样写
追问
你看我程序里面写的，elem.style[attr] = value;////////////////////////////////////////////////这句为什么不可以换成elem.style.attr=value
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
