style.left 与 offsetLeft的区别

最新推荐文章于 2022-02-10 13:25:34 发布
最新推荐文章于 2022-02-10 13:25:34 发布
阅读量245 收藏
点赞数 1
分类专栏： 前端学习 javascript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/virusos/article/details/70100830
版权

offsetLeft: 获取的是当前对象左侧距离父对象左侧的值(均不包含border);（返回的是一个值）
style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距;（返回的是一个值+’px’)

参考：http://www.imooc.com/qadetail/207033

virusos
关注
专栏目录
JavaScript中style.left与offsetLeft的使用及区别详解
01-19
如果父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里，我做过试验，
javascript中style.left和offsetLeft的用法说明
12-11
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是...
offsetLeft和style.left的区别
u012309349的博客
02-14 3247
offsetLeft和style.left的区别
style.left 与offsetLeft，style.width和offsetWidth的之间区别
Freedom的blog
07-10 769
1. style.left 与offsetLeft之间的区别 　　offsetLeft 获取的是相对于父对象的左边距marginleft，left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的...
javascript之style.left和offsetLeft的区别
背着吉他的蝙蝠女侠的博客
12-23 701
offsetLeft取到的值是数值型的，只能取值，不能赋值。 style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类型的。  demo代码如下： Document * { margin: 0; padding: 0; } .box { width: 600px; height: 6
style.left
qq_41818857的博客
05-13 495
无法获取style标签以及link标签导入的left值。 解决方法： 换 jq 的一种方式 var left = $(’#v12’).position().left; var top = $(’#v12’).position().top; 或者 getComputedStyle(元素, null)[“left”]
JavaScript中style.left与offsetLeft的用法及区分详解_.docx
10-09
在JavaScript中，`style.left`和`offsetLeft`都是用于获取和设置元素位置的属性，但它们有着明显的区别。理解这两个属性的用法和差异对于动态调整网页元素的位置至关重要。 首先，`style.left`是元素的CSS样式属性...
js中的offsetLeft和style.left
zp19860529的博客
08-05 2125
（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
style.left和offsetLeft 用法
m0_49793175的博客
02-10 404
这里写自定义目录标题Javascript中的style.left和offsetLeft的使用说明 Javascript中的style.left和offsetLeft的使用说明 style.left 和 offsetLeft 如果设置了父子的postion之后，才是相同的，唯一的区别是offsetLeft 是整型，style.left 是字符串。务必设置父的postiion为relative ，子的position设置为absolute才能生效。否则无效 ...
offsetLeft与style.left区别
喜东东的博客
08-03 182
offsetLeft 获取的是相对于父对象的左边距， left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距，如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的。 区别： 1. style.left 返回...
style.left不起作用的问题
wwwjr00的博客
05-23 5406
最近调试程序：待续
html中style.left属性是什么,HTML DOM Style marginLeft 属性 | 菜鸟教程
weixin_31171307的博客
06-07 893
Style marginLeft 属性 Style 对象定义和用法marginLeft 属性设置或返回元素的左外边距。语法设置 marginLeft 属性：Object.style.marginLeft="%|length|auto|inherit"返回 marginLeft 属性：Object.style.marginLeft值描述%定义基于父元素宽度的百分比左外边距。length使用 px、c...
html对象的style.left和offsetLeft区别，以及分享一个封装好的缓动动画函数，可用来做轮播图，滑动门特效。
weixin_47469299的博客
10-21 471
区别就是offsetLeft是只读的，而style.left是可以修改的，所以要修改只能修改style.left。 function animate(obj,target,callback){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var step = (target - obj.offsetLeft)/10; step = step >0 ? Math.ceil(step): Math.floor(
html中offsetleft属性,详解 javascript中offsetleft属性的用法
weixin_31476341的博客
06-08 1101
此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。(1).如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。(2).如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。语法结构:obj.offsetleft特别说明:此属性是只读的，不能够赋值。代码实例:蚂蚁部落*{margin: 0px;padding: 0px;}#main{...
html中offsetleft属性,offsetleft兼容性的理解
weixin_36300275的博客
06-08 743
关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。此属性具有一定的兼容性问题，那就是在IE7浏览器中，它的返回值是想对于最近的父辈元素的左侧的距离。上面的代码在其他浏览器中返回值是100，但是在IE7浏览器中返回值是50。至于IE6没有测试，感兴趣的大家可以做一下测试。下面抽点空给大家介绍offsetLeft与style.left的区别offsetLeft 获取的是相对于父对象的...
总结style.left与offsetleft的区别
Hariod的博客
04-05 660
在使用js操作css时经常会用到style.left也会用到offsetleft现在对这两点语法做一个总结，方便使用更合适的 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 style.left 不可以返回没有定位的盒子距离左侧的位置 只有定位的盒子才有 left top right offsetTop 返回的是数字。 style.top 返回的是字符串，除了数字外...
html中offsetleft属性,HTML DOM offsetLeft用法及代码示例
weixin_33169898的博客
06-08 544
DOM offsetLeft属性用于返回像素的左位置。此位置相对于offsetParent元素的左侧。用法:element.offsetLeft返回值：它返回以像素为单位表示元素左侧位置的数字。例：DOM offsetLeft Property#GFG {height:50px;width:200px;padding:10px;background-color:green;}DOM Style o...
// 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 加载完成后计算图片的宽高比例 popupImg.onload = function() { var imgWidth = popupImg.width; var imgHeight = popupImg.height; // 计算图片的缩放比例 var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var widthScale = windowWidth / imgWidth; var heightScale = windowHeight / imgHeight; scale = Math.min(widthScale, heightScale); // 设置弹出窗口中的图片样式 popupImg.style.transform = `scale(${scale})`; popupImg.style.display = "block"; popupImg.style.margin = "auto"; // 居中弹出窗口 function centerPopup() { var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.top = "10%"; popup.style.left = "10%"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999";这是我的代码，经过上面设置后，当表格行数过多时任然会存在放大图片的悬浮窗未在屏幕中心，靠近页面底部，且只显示一半图片
最新发布
07-14
popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值