javascript - offset的使用？-PHP中文网问答

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - offset的使用？

PHP中文网 2017-04-11 12:08:34

[JavaScript讨论组]

565

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

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

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

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

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

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

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

PHP中文网

认证高级PHP讲师

全部回复(5)

ringa_lee2017-04-11 12:10:34 5楼

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

赞 +0

添加回复

大家讲道理2017-04-11 12:10:34 4楼

一条一条回答

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