javascript中无法通过div.style.left获取值的问题
2016-12-12 08:34
288 查看
一、问题总结:
样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。
让元素移动到200停止
二、关于offsetLeft和left的区别(关于offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)
1.定义了position:relative或absolute属性的元素才有left属性,元素都有offsetLeft属性。
2.元素内联样式中设置了left,才能通过div.style.left获取;offsetLeft直接通过div.offsetLeft获取。
3.left可读可写,获取到的是字符串;offsetLeft只读,获取到的是数字。
相同点:定位方式一样,如果父元素设置了定位元素(position设置为relative或absolute),则相对于定位元素定位,否则就是相对于根元素定位。
三、案例:
HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近 的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
下面的span的父元素没有设置定位元素,所以该元素的offsetParent为根元素,此时的offsetTop相对于根元素定位。
![](https://images2015.cnblogs.com/blog/746178/201612/746178-20161212080800214-774645328.png)
如果给long的父元素添加一个定位属性,结果如下:
![](https://images2015.cnblogs.com/blog/746178/201612/746178-20161212083230808-1650196654.png)
四、总结:
javascript中通过offsetLeft(offsetTop)方法获取元素偏移值很方便,得到的是数值;改变元素的偏移值使用style.left(top、right、bottom),通过style.left获取的是一个字符串的值,如果要通过style.left来改变元素位置,先要通过parseInt将获取到的当前left值转化为数值。
2017.1.26补充:
offsetWidth/offsetHeight
js获取Html元素的实际宽度高度:http://blog.csdn.net/makiyonn/article/details/8587353
样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。
让元素移动到200停止
setTimeout ( function () { var div = document.getElementById("div4"); //var left = parseInt(div.style.left) + 5; var left = div.offsetLeft + 5; div.style.left = left + "px"; if (left < 200) { setTimeout( arguments.callee, 50); } }, 50);
二、关于offsetLeft和left的区别(关于offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)
1.定义了position:relative或absolute属性的元素才有left属性,元素都有offsetLeft属性。
2.元素内联样式中设置了left,才能通过div.style.left获取;offsetLeft直接通过div.offsetLeft获取。
3.left可读可写,获取到的是字符串;offsetLeft只读,获取到的是数字。
相同点:定位方式一样,如果父元素设置了定位元素(position设置为relative或absolute),则相对于定位元素定位,否则就是相对于根元素定位。
三、案例:
HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近 的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
下面的span的父元素没有设置定位元素,所以该元素的offsetParent为根元素,此时的offsetTop相对于根元素定位。
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>Short span. </span> <span id="long">Long span that wraps withing this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script> var box = document.getElementById("box"); var long = document.getElementById("long"); // // long.offsetLeft这个值就是span的offsetLeft. // span是个行内元素,它没有没absolute定位,但还是默认offserParent就是父元素,而不是根 // box.style.left = long.offsetLeft + document.body.scrollLeft + "px"; box.style.top = long.offsetTop + document.body.scrollTop + "px"; box.style.width = long.offsetWidth + "px"; box.style.height = long.offsetHeight + "px"; </script>
![](https://images2015.cnblogs.com/blog/746178/201612/746178-20161212080800214-774645328.png)
如果给long的父元素添加一个定位属性,结果如下:
![](https://images2015.cnblogs.com/blog/746178/201612/746178-20161212083230808-1650196654.png)
四、总结:
javascript中通过offsetLeft(offsetTop)方法获取元素偏移值很方便,得到的是数值;改变元素的偏移值使用style.left(top、right、bottom),通过style.left获取的是一个字符串的值,如果要通过style.left来改变元素位置,先要通过parseInt将获取到的当前left值转化为数值。
2017.1.26补充:
offsetWidth/offsetHeight
js获取Html元素的实际宽度高度:http://blog.csdn.net/makiyonn/article/details/8587353
相关文章推荐
- JavaScript中无法通过div.style.left获取值的解决方法
- 使用Struts2-tags的include,所带参数无法通过ongl直接获取的问题
- 囧,Javascript中获取与设置DIV高度的问题
- (转)用js无法获取style样式的问题解析与解决方法
- openwrt dnsmasq启动问题偶尔导致lan侧设备无法通过dhcp获取IP地址
- js无法获取style样式的问题解析与解决方法
- Activity设置singleTask无法通过Intent获取值的问题
- 在chrome中通过getComputedStyle()获取透明度的问题
- asp.net(C#)通过WMI无法获取磁盘卷序列号(硬件信息)的问题解决办
- Activity设置singleTask无法通过Intent获取值的问题
- jquery datatable 通过ajax从后台获取每个分页数据后,搜索框无法搜索问题
- <div style="display:none">中更改的内容使用js无法获取
- DOCTYPE html PUBLIC 让人吐血的问题(转载)div.style.left为空
- UITableView获取cell的row值(解决自定义cell里的button通过点击无法获得cell的indexpath的问题)
- 防止盗链问题:Javascript从A页面跳到B页面,B页面无法获取A页面网址来源,即B页面的Request.UrlReferrer为null
- 关于通过GPS模块获取的坐标数据无法在Google地图上正确标记的问题说明
- 通过android:descendantFocusability解决listview每一项或项中view无法获取焦点的问题
- Activity设置singleTask无法通过Intent获取值的问题
- JavaScript基础 通过style属性设置div的高度,宽度,背景颜色
- JavaScript基础 通过style属性设置div的高度,宽度,背景颜色