`
stoneuu
  • 浏览: 46596 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【转】style.left 与 offsetLeft

 
阅读更多
首先假设有一个元素是这样的<input id="message" value="123" /> var elem = document.getElementById("message"),此时elem得到的就是这个元素了.
通过访问elem.id,我们能获得elem的id,elem.value我们能得到123.注意这里的id以及value都是直接写在标签中的.我的意思就是,这样的访问是只能访问标签的属性,也就是直接写在标签里的属性.而你的代码中,elem.style.left想要获取elem的left值是获取不到的,因为left的定义是写在样式表中而不是标签内的.

因此,你可以把标签改为

<p id="message" style="left:20px;top:302px;">weel</p>
或者用js代码给message初始赋值:

document.getElementById('message').style.left = "20px";
document.getElementById('message').style.top = "302px";

-----------------------------------------------------

有时候碰到一个问题,通过div的style.left属性取不到值,拖动div后可以取到值。

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。

2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。

3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。offsetLeft则仍然能够取到,无需事先定义div的位置。

----------------------------------

http://www.17leba.com/%E7%94%A8js%E6%97%A0%E6%B3%95%E8%8E%B7%E5%8F%96style%E6%A0%B7%E5%BC%8F%E7%9A%84%E9%97%AE%E9%A2%98%E8%A7%A3%E6%9E%90%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/

分享到:
评论

相关推荐

    JavaScript中style.left与offsetLeft的用法及区分详解_.docx

    举个例子,如果你有一个相对定位的父元素和一个绝对定位的子元素,`style.left`和`offsetLeft`在初始状态下可能会有相同的值,因为它们都反映了子元素与父元素左边的距离。但当你需要动态改变子元素的位置时,你必须...

    javascript中style.left和offsetLeft的用法说明

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是...

    JavaScript中style.left与offsetLeft的使用及区别详解

    与style.left不同,offsetLeft是元素的一个只读属性,它返回一个表示元素左外边框与包含它的元素左内边框之间的距离的数值。这个距离的计算不依赖于CSS样式,因此即使元素的样式是在外部CSS文件中定义的,offsetLeft...

    div的offsetLeft与style.left区别

    与offsetLeft不同,style.left是一个CSS样式属性,它表示元素的左边框相对于其定位上下文(positioning context)的偏移量。style.left可以获取或设置元素的left属性值,单位是像素、em单位等,具体取决于其样式表中...

    JavaScript中无法通过div.style.left获取值的解决方法

    综上所述,我们可以知道,使用JavaScript通过div.style.left获取样式值时的限制,并且理解offsetLeft和left属性的区别及其应用场景。通常情况下,如果需要改变元素的位置,使用offsetLeft获取偏移量的数值,并通过...

    JS获取浮动(float)元素的style.left值为空的快速解决办法

    2. **直接获取元素的`offsetLeft`**:`offsetLeft`属性可以提供元素相对于其最近非static定位祖先元素的左侧距离,即使`style.left`为空,`offsetLeft`仍能返回一个数值。这样可以避免处理字符串和单位的问题,尤其...

    window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    关于`offsetLeft`和`style.left`的区别: 1. `offsetLeft` 属性返回元素相对于其最近的定位(position非static)父元素的左边缘的距离,以像素为单位。这是一个只读属性,无法直接设置。 2. `style.left` 属性用于...

    images.zip

    轮播图代码和文件,//函数1:animate(ele,target)... ele.style.left = ele.offsetLeft + speed + "px"; if(Math.abs(val)&lt;Math.abs(speed)){ ele.style.left = target+"px"; clearInterval(ele.timer); } },10) }

    js基础动画(分享)

    setInterval(函数,毫秒) 定时器 onmouseover 鼠标移入 onmouseout 鼠标移出 object.style.left 修改left object.offsetLeft 当前的left object.style.left=object.offsetLeft+num'px' clearInterval 清除定时器

    animate.js

    做了个动画的封装 但是在执行第一个清除定时器是一直报错 Uncaught TypeError: Cannot read property 'times' of null ... obj.style.left = obj.offsetLeft + step + 'px' ; } },15); }

    仿淘宝js放大镜效果

    var Left = mousePosition(e).x - smalmg.offsetLeft - show_half; //获取当前移动的showimg位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 滤镜图的宽(高)的/2 Top = Top&lt;0?0:Top&gt;maxHeight?maxHeight:Top; ...

    【JavaScript源代码】原生JS实现拖拽位置预览.docx

    oNewDiv.style.left = oDiv.offsetLeft + 'px'; oNewDiv.style.top = oDiv.offsetTop + 'px'; document.body.appendChild(oNewDiv); // 监听鼠标移动事件 document.onmousemove = function(ev) { var oEvent...

    【JavaScript源代码】Javascript实现登录框拖拽效果.docx

    loginBox.style.left = parsedPosition.left + 'px'; loginBox.style.top = parsedPosition.top + 'px'; } else { // 如果没有记录,可以设置默认位置 loginBox.style.left = '50%'; loginBox.style.top = '50...

    谈谈对offsetleft兼容性的理解

    对于 `style.left` 和 `offsetLeft` 的使用,要根据具体需求来选择,如果需要动态调整位置,`style.left` 更合适;如果仅用于获取当前位置,`offsetLeft` 则更为便捷。 总的来说,理解和处理 `offsetLeft` 的兼容性...

Global site tag (gtag.js) - Google Analytics