js获取style属性值的问题
来源：4-2 获取样式
Naritheon
2016-05-25 16:44
这节课里面老师说用obj.style.attr获取obj的属性attr，这种方法必须是在属性attr通过内嵌在标签里面才能读取到，是这个意思吗，比如：
<style type = "text/css">
div{
width:200px;
height:60px;
background: yellow;
}
</style>
<script type = "text/javascript">
var obj = document.getElementById("div1");
obj_width = obj.style.width;
</script>
<body>
<div id = "div1"></div>
</body>按照老师 的意思，是不是就是说，上面代码的obj_width = obj.style.width;
这句是无效的，获取不到div1的width值，因为js代码无法获取CSS里面的样式，只能获取内嵌在标签里面的CSS样式，所以如果想要以这种办法获取目标属性，必须把目标想要被获取的CSS属性写在这里面：<body><div id = "div1" style = "width:200px"></div></body>只有这样才能用obj.style.attr获取相应的属性呢？
但是在前一节课中，CSS定义在<style></style>里，用obj.style.attr还是能获取到相应的属性啊，为什么呢？好乱啊。。。
上一节课的代码，完全可以跑起来啊，并不会出现obj.type.attr获取不到CSS里面样式的情况，为什么呢？
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function () {
var aLi = document.getElementsByTagName('li')
for(var i = 0; i<aLi.length; i++){
aLi[i].timer = null;
aLi[i].onmouseover = function () {
move(this,400);
};
aLi[i].onmouseout = function () {
move(this,200);
}
}
};
function move(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (target - obj.offsetWidth)/8;
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (obj.offsetWidth == target){
clearInterval(obj.timer);
}else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
},30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
求高人指点，不胜感激！
写回答
关注
4回答
-
- 邪君灬无情
- 2016-05-27 10:18:19
恩恩，应该是这样吧
-
- 你看起来似乎很美味
- 2016-09-27 12:32:52
亲，我们前面的课程，都是用element.style.xxxxxx =xxxxx; ——这个是设置，不是读取嗷
-
- 邪君灬无情
- 2016-05-26 11:26:20
因为在style标签里写的width属性值为200，你读取的时候只能读取到200px这个值，而写在内置标签里，才可以随意读取和写入，可以变化
-
- zhanghongjie
- 2016-05-25 18:56:32
你说的是啥？？？？？？？？
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题