javascript - 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";

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

解决方案

答案很简答。
针对这个，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样式表中（无论内联还是外联）预先设置改属性，不然也无法获取。

这篇关于javascript - offset的使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！