element.style.left 和 element.offsetLeft 的区别

最新推荐文章于 2022-07-03 22:23:55 发布
最新推荐文章于 2022-07-03 22:23:55 发布
阅读量398 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45840253/article/details/119789971
版权

1.element.style.left 只能获取行内样式，
2element.offsetLeft 当父级元素节点是定位时，获取的值则是相对父级的位置否则是相对body的位置的值
3.element.offsetLeft 获取的值是只读 element.style.left 是可读写

novalLYK
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div的offsetLeft与style.left区别
10-21
主要介绍了div的offsetLeft与style.left区别的相关资料,需要的朋友可以参考下
前端基础知识--Element的常用属性及函数
wzy_PROTEIN的博客
09-08 2341
Element的常用属性及函数
elem.style.left得不到left的值
kimmmmqin的博客
05-08 708
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div { width: 50px; height: 50px; background: red; position: absolute;
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
如何更改element.style的值
weixin_42842981的博客
08-27 606
如何更改element.style的值 使用！importan 例如： <style> #article-img > img{ width: 10rem !important; height: 10rem !important; } </style>
js获取style.left为什么为空？
yjyxw的博客
08-03 747
原因： element.style.left 只能获得element的行内样式，所以一般写在style或css文件内的left就无法获得。 内联样式就是直接加在某个元素属性中的样式。方法为<p style="color:white;"></p> 解决办法： 用element.offsetLeft来获取 ...
94 添加hover方法 和show hide 方法
小漠007的专栏
04-29 676
var $=function(_this)//调用,把this传递过来 {     return new Base(_this); }; //对象式 function Base(_this) {     //创建一个数组来获取节点和节点的数组     this.elements=[];//私有化，不共用     if(_this!=undefined)//这里的_this
元素偏移量 offset
weixin_52212950的博客
03-13 5687
offset 即元素偏移量，可以动态地得到元素的大小，位置等等 offset 常用的属性有以下几种： 要注意获取的都是距离带有定位的父元素的位置，而且返回值都不带单位 element.offsetTop：返回值为距离有定位的父元素的上边距的偏移 element.offsetLeft：返回值为距离有定位的父元素的左边距的偏移 element.offsetWidth：返回值为自身宽度+padding+border，不带单位 element.offsetHeight：返回值为自身高度+padding+
HTMLElement属性：offsetParent,offsetLeft,offsetTop
m0_37158404的博客
05-20 601
HTMLElement.offsetParent - Web API 接口参考 | MDN HTMLElement.offsetParent是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的table,td,th,body元素。当元素的style.display设置为 "none" 时，offsetParent返回null。offsetParent很有用，因为offsetTop和offsetLeft都是相对于其内边距边界的。 HTMLElem...
javascript中style.left和offsetLeft的用法说明
10-26
本篇文章主要是对javascript中style.left和offsetLeft的用法进行了说明介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JavaScript中style.left与offsetLeft的使用及区别详解
10-22
主要介绍了JavaScript中style.left与offsetLeft的使用及区别详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
09-03
window.setInterval()方法可以按照指定的周期执行来执行一段程序。周期是以毫秒为单位的，本文给大家介绍window.setInterval()方法的定义和用法，感兴趣的朋友参考下
js中offset系列、client系列、scroll系列和screen系列详解
RayShyy的博客
03-15 882
1. offset系列 element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + bord
PC端特效——动画函数
asdf1234dfty的博客
07-03 185
动画
js中的offsetLeft和style.left
zp19860529的博客
08-05 1961
（1）style.left是带单位"px"的，而offsetLeft没有单位，另外，style.left必须是内联样式，或者在JS中通过style.left赋值，否则取得的将为空字符串（在内部样式和外部样式中指定left是无效的） （2）如果没有已经定位的父元素，那么offsetLeft指向的是文档（document）的左边缘 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
offsetLeft、offsetTop、offsetWidth、offsetHeight属性
diaozhen9799的博客
09-23 291
首先让我们先看一看element.offsetLeft属性。 支持的浏览器：InternetExplorer4.0+，Mozilla1.0+，Netscape6.0+，Opera7.0+，Safari1.0+ 定义：返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。 句法： leftDis=elem...
Javascript使用三大家族和事件来DIY动画效果相关笔记（二）
badongqing5553的博客
06-26 183
1.offset家族补充◆offset取值返回时一个number类型的数值，但是它不会返回带小数的整数，内部做了四舍五入的处理，如style.left=9.4px，offsetLeft获取到的值是9，然而style.left=9.5px，offsetLeft获取到的值是10。2.缓速动画与匀速动画的原理◆匀速动画的原理：this.style.left=t...
在firefox中诡异的element.style.left
yuyu1911的专栏
02-26 181
在运行《javascript王者归来》的一个圆形轨迹例子，发现他在IE中能正常运行，但在firefox中却一直不动，js代码如下: var r=50; var ins=1; var round = document.getElementById("round"); function Circle() { x=r * Math.cos(ins) + 100; y=r* Math.sin(ins) +...
基于TC72（SPI接口）温度传感器、STM32F103C8T6、LCD1602、FREERTOS的温度采集proteus仿真
最新发布
05-21
spi
把这段代码改成左右切换页面的function move (arg) { let aele = document.getElementsByClassName("menuitem"); clear(aele); let aMove =document.getElementsByClassName("move"); aMove[0].style.left = -arg* 100 +'%';//运算好了以后; arg = (arg - 1 + aelement.length) % aelement.length; }
06-02
container.style.left = left + 'px'; setTimeout(animate, interval); } else { container.style.left = to + 'px'; } } animate(); highlightMenuItem(index); } function highlightMenuItem(index) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值