总结style.left与offsetleft的区别

最新推荐文章于 2022-02-10 13:25:34 发布
原创 最新推荐文章于 2022-02-10 13:25:34 发布 · 784 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #css #es6
本文对比分析了JavaScript中style.left/top与offsetLeft/Top的使用区别。style属性可读写，用于获取或设置元素的内联样式，如'300px'；而offset系列属性只读，返回元素相对于其offsetParent的距离，不带单位。offset属性不受CSS定位影响，适用于所有元素。

在使用js操作css时经常会用到style.left也会用到offsetleft现在对这两点语法做一个总结，方便使用更合适的

  1. offsetLeft 可以返回没有定位盒子的距离左侧的位置。
    style.left 不可以返回没有定位的盒子距离左侧的位置 只有定位的盒子才有 left top right

  2. offsetTop 返回的是数字。
    style.top 返回的是字符串，除了数字外还带有单位：px。
    offsetTop=300
    style.left = 300px parseInt（300px） 结果 30
    如果我们需要对style.left的值进行加减运算，可以使用parseInt
    parseInt（style.left） + parseInt（style.left）

  3. offsetTop 只读,只能获取某元素的offsetTop数值
    style.top 可读写，可以获取某元素的top值(获取的时候只能获取行内式)，也可以设置某元素的top值

  4. 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

  5. style.left 只能得到html元素的行内样式
    offsetLeft 没有只能得到行内样式的限制

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里，我做过试验，
js中的offsetLeft和style.left
zp19860529的博客
08-05 2405
（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
qq_41818857的博客
05-13 571
无法获取style标签以及link标签导入的left值。 解决方法： 换 jq 的一种方式 var left = $(’#v12’).position().left; var top = $(’#v12’).position().top; 或者 getComputedStyle(元素, null)[“left”]
html对象的style.left和offsetLeft区别，以及分享一个封装好的缓动动画函数，可用来做轮播图，滑动门特效。
weixin_47469299的博客
10-21 570
区别就是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(
style.left和offsetLeft 用法
m0_49793175的博客
02-10 487
这里写自定义目录标题Javascript中的style.left和offsetLeft的使用说明 Javascript中的style.left和offsetLeft的使用说明 style.left 和 offsetLeft 如果设置了父子的postion之后，才是相同的，唯一的区别是offsetLeft 是整型，style.left 是字符串。务必设置父的postiion为relative ，子的position设置为absolute才能生效。否则无效 ...
JS中div.style.left和div.offsetLeft的区别
HarryMing的技术分享
07-09 2464
两者比较重要的几点区别 一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 代码如下(此时父子盒子都不带有定位)： <head> <style> .out{ width: 100px; height: 100px; ...
offsetLeft style.Left 的区别
mj_leona的博客
03-19 322
offsetLeft style.Left 的区别一、最大区别在于  offsetLeft  可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以  只有定位的盒子 才有 left  top right   二、offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。 style.left = 300px      parseIn...
offsetLeft和style.left的区别
u012309349的博客
02-14 3391
offsetLeft和style.left的区别
offsetLeft与style.left区别
...
10-20 1163
如果父div的position定义为relative, 子div的position定义为absolute， 那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的， 区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28 ，如果需要对取得的值进行计算，还用offsetLeft比较方
offsetLeft与style.left的区别
aa1693424154的博客
10-22 129
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：1. style...
style.left,style.width与offsetLeft,offsetWidth、scrollLeft，scrollWidth的区别
mr_fzz的博客
11-04 2028
1.offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。2.style.left必须是节点设置了position属性 style.left、style.width等属性通过
js-DOM offsetLeft 属性与 offsetTop 属性，制作网页动画等必学知识！
weixin_57269725的博客
10-16 4236
目录 前言 一、offsetLeft与offsetTop属性 1、offsetLeft的定义和用法 2、offsetTop的定义和用法 结束语 前言 在制作动画的时候，我们常常需要用到offsetLeft属性来得到盒子的左偏移量，那它具体的原理是什么呢？ 今天我们就来学习学习！ 一、offsetLeft与offsetTop属性 1、offsetLeft的定义和用法 offsetLeft 是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
style.left不起作用的问题
wwwjr00的博客
05-23 5642
最近调试程序：待续
style.left 与offsetLeft，style.width和offsetWidth的之间区别
Freedom的blog
07-10 865
1. style.left 与offsetLeft之间的区别 　　offsetLeft 获取的是相对于父对象的左边距marginleft，left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的...
前端学习无缝滚动
msjlktc的博客
05-16 526
style-left与offsetleft的区别 1.style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在 css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。 offsetLeft则仍然能够取到，无需事先定义div的位置。 2. style.left 返回的是字符串，如28px，offs...
js的style.left与style.offsetLeft解析
allenmu1982的博客
07-20 385
一，对于offsetLeft累属性： offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。 offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。 二，如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值。 这同offsetLef...
style.left,offsetLeft相对于容器的位置控制
cheng - cheer up。。。 。。。
11-13 681
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.l...
style.left不起作用
liufeng520的专栏
06-27 4876
html文件第一行加了如下代码后： 如下代码不起作用： var element = document.getElementById(“test”); element.style.top=(document.documentElement.clientHeight-element.clientHeight)/2+document.documentElement.scrollTop;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值