offset的使用？

最近在自学js，水平比较浅，希望不要嫌我问的问题比较傻呐。

好吧说正题，我在模仿幕课网上的一个js效果，但对其中一个地方弄不明白，下面贴代码：

<script>
    window.onload = function () {
        var odiv = document.getElementById('div1');
        odiv.onmouseover = function () {
            startMove();
        }
    }
    function startMove() {
        var odiv = document.getElementById('div1');
        setInterval(function(){
//            odiv.style.left = odiv.offsetLeft + 10 + "px";
            odiv.style.left = odiv.style.left + 10 + "px";

        },30)
    }
</script>

我的问题主要是startMove函数里，想修改odiv.style.left为什么只能通过odiv.oddsetLeft.、
注释掉的是课程里的代码。
我自己写的是：

 odiv.style.left = odiv.style.left + 10 + "px";

但图片原本的left值是-200px，这么写完之后直接变成10px了，然后我觉得是不是没有对获取到的值进行转换，就改写成这样：

odiv.style.left = parseInt（odiv.style.left） + 10 + "px";

但这次反而什么反应都没了，所以我想问下我错在哪了。
不知道叙述清楚没有。

如果没有把初始样式写在行内，好像通过.style.left得到的是一个空字符串，所以你的第一句赋值给left的是10px; 但是如果parseInt一个空字符串得到的是NaN，赋值给left的值就是NaN10px，浏览器自然不认识这个东西

offsetLeft 获取的是相对于父对象的左边距不需要定位的
而 left right top 等都是相对于定位元素的比如你父元素position relative
div 为absolute 那么left 就有值了

遇到问题自己打印一下看看数据不就行可以看出来了

一条一条回答

为什么只能通过odiv.offsetLeft?
element.style只能获取元素的行内样式<div style='background-color:#fff;'></div>, 而无法获取CSS样式表中的样式; 如果你的odiv一开始行内样式是空的, 那odiv.style是什么也拿不到的, 因此需要通过odiv.offsetLeft来获取它相对于父元素的位置.
为什么odiv.style.left = odiv.style.left + 10 + "px";不管用?
前面说过 odiv.style.left 是没有值的, 因此JS返回的是一个空字符串 - odiv.style.left就等于''. 由于等式的右边是'px', 因此JS自动应用了字符串拼接, 就相当于'' + + 10 + "px";, 结果是'10px', 然后直接赋值给'odiv.style'
'odiv.style.left = parseInt（odiv.style.left） + 10 + "px";'不管用?
一样的问题, odiv.style.left还是空字符串, 只不过这次parseInt('')得到的结果是NaN, 拼接起来是"NaNpx", 根本都不是有效的css样式了.

题主自学JS多久了...

答案很简答。
针对这个，odiv.style.left + 10 + "px";
非行间样式这样的获取方法是非法的。不可以这么写。
需要用getStyle的自定义函数来获取，简单说就是这个

function getStyle(obj,attr)
{
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];//兼容获取非行间样式写法
}

如果三元运算符看不懂，那这样也可以

if(obj.currentStyle)
{
    return obj.currentStyle[attr];
}
else
{
    return getComputedStyle(obj)[attr];
}

ps.注意！上述获取样式函数，必须在css样式表中（无论内联还是外联）预先设置改属性，不然也无法获取。

【热门文章】