window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function (){
startMove(this,'height',200);
}
oDiv.onmouseout = function (){
startMove(this,'height',100);
}
};
function getStyle (obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove (obj,styleName,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var curr = parseInt(getStyle(obj,styleName));
var speed = (iTarget - curr)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(curr == iTarget){
clearInterval(obj.timer);
}
else
{
obj.style[styleName] = curr + speed +'px';
}
},30);
}
currentStyle不是只能获取内联属性么,以下代码中变量curr为什么会跟着变化
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答
- qq_40250105 2018-04-17 02:56关注
currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 STYLE 标签属性应用到元素的内嵌样式。因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象 style.color 不能返回值。但是,如果用户指定了
,currentStyle 和 STYLE 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:
内嵌样式
样式表规则
HTML 标签属性
HTML 标签的内部定义
从而,currentStyle 对象将为 bold 标签返回 fontWeight 值 normal,若在样式表中为此标签指定了 normal。currentStyle 返回反映页面所应用的样式设置的值,但可能并不反映获取值时渲染所采用的值。例如,样式值设置为 "color:red; display:none" 的对象,将返回 currentStyle.color 为 red,尽管该对象并不在页面上渲染。也就是说,currentStyle 对象并不受渲染与否的绑定。在下面示例区的第三个例子演示了此行为。禁用的样式表也不影响 currentStyle 值。
返回值的单位与设置对象时的单位相同。例如,若对象的颜色是以内嵌 STYLE="color:'green'" 的格式设置的,那么 object.currentStyle.color 将返回 green 而不是 #00FF00 (与绿色相等的红绿蓝十六进制值)。但是,当 currentStyle 对象返回对象值的时候出现在作者所设置的对象值中的大写和多余的空白将被去掉。
currentStyle 对象支持用户自定义的样式规则属性。请参看示例区的第二个例子。
currentStyle 对象是异步的。这意味着样式不可能被设置后马上就能查询,而是返回旧值。因此,对于含有 addImport 这样方法的想要获得所期待的 currentStyle 行为的脚本,该脚本需要包含一个调用方法的函数和一个检查 currentStyle 的函数。对于需要在页面装载的时候检查当前属性的脚本,脚本必须等到 body 元素装入且页面被选然后,否则 currentStyle 的值可能不反映所显示的情况。
解决 无用评论 打赏 举报