js获取style.left为什么为空？

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

原因：

element.style.left 只能获得element的行内样式，所以一般写在style或css文件内的left就无法获得。

内联样式就是直接加在某个元素属性中的样式。方法为<p style="left:100px;"></p>

解决办法：

用element.offsetLeft来获取

 

自己做案例时发现的问题，记录一下：

获取style。left值时要用element.offsetLeft

但是赋值时用style.left就行

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

阳光的羊羊羊羊
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JS获取浮动(float)元素的style.left值为空的快速解决办法
10-20
然而，在处理浮动(float)元素时，可能会遇到一个常见问题，即尝试通过`style.left`获取元素位置时，其值可能为空。这个问题主要出现在以下情况： 1. 当一个元素设置了浮动(float)，例如`float: left`或`float: ...
js获取当前节点css,原生js获取元素的样式style属性值
weixin_29073241的博客
08-03 1547
事情是这样的，我今天在帮一个朋友实现原生手写轮播图，然后我发现自己在获取一个元素的样式上出现了一点点小问题，就顺带去谷歌了一番了。原生js获取CSS样式.png一 原本的我????问题：是这样的，一开始需要获取某一个元素的left值，我就用ele.style.left去获取了(基础不扎实还好意思来丢人)，然后居然返回的是空。好吧，追本溯源，问题的根源以及区别就在这里了。ele.style 的使用只读内联...
html的script中使用ele.style获取元素样式全为空的原因
xawjz的博客
09-06 613
script中使用元素.style获取元素的样式的时候，只能获取到内联样式，通过style标签添加的样式无法获取（表现为空值） <style> .container{ background-color : black; } </style> <body> <div class="container" style="color:red;"> </div> </bod...
element.style.left 和 element.offsetLeft 的区别
weixin_45840253的博客
08-18 410
1.element.style.left 只能获取行内样式， 2element.offsetLeft 当父级元素节点是定位时，获取的值则是相对父级的位置否则是相对body的位置的值 3.element.offsetLeft 获取的值是只读 element.style.left 是可读写
94 添加hover方法 和show hide 方法
小漠007的专栏
04-29 692
var $=function(_this)//调用,把this传递过来 {     return new Base(_this); }; //对象式 function Base(_this) {     //创建一个数组来获取节点和节点的数组     this.elements=[];//私有化，不共用     if(_this!=undefined)//这里的_this
style.left不起作用
liufeng520的专栏
06-27 4733
html文件第一行加了如下代码后： 如下代码不起作用： var element = document.getElementById(“test”); element.style.top=(document.documentElement.clientHeight-element.clientHeight)/2+document.documentElement.scrollTop;
JS获取页面的各种距离总结
stanwuc的博客
09-20 6182
1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度
JavaScript中无法通过div.style.left获取值的解决方法
10-20
主要介绍了JavaScript中无法通过div.style.left获取值的问题分析及解决方法,需要的朋友可以参考下
JavaScript中style.left与offsetLeft的用法及区分详解_.docx
10-09
在JavaScript中，`style.left`和`offsetLeft`都是用于获取和设置元素位置的属性，但它们有着明显的区别。理解这两个属性的用法和差异对于动态调整网页元素的位置至关重要。 首先，`style.left`是元素的CSS样式属性...
js中xx.style.top、xx.style.left等取不到值的原因
weixin_30852451的博客
05-17 640
　　在js中有的朋友用xx.style.top取不到对象的值，很是郁闷。原因就在与style只能内嵌样式的值。 也就是说要这么写才能获取到值： 　　　<div id="xx" style="width:200px;height:200px; top:100px;"></div> 　　下面是参考： 　　　　var divTop =divObj.style.top /...
js中的offsetLeft和style.left
zp19860529的博客
08-05 2031
（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
PC端特效——动画函数
asdf1234dfty的博客
07-03 192
动画
javascript之style.left和offsetLeft的区别
背着吉他的蝙蝠女侠的博客
12-23 685
offsetLeft取到的值是数值型的，只能取值，不能赋值。 style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类型的。  demo代码如下： Document * { margin: 0; padding: 0; } .box { width: 600px; height: 6
JS中div.style.left和div.offsetLeft的区别
HarryMing的技术分享
07-09 2297
两者比较重要的几点区别 一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 代码如下(此时父子盒子都不带有定位)： <head> <style> .out{ width: 100px; height: 100px; ...
web前端总结-js（10）
YoungManxia的博客
11-04 119
学习目标： 1.offset系列 2.动画实现原理 3.简单动画封装函数 4.给不同对象添加不同的定时器 5.缓动动画 6.回调函数 7.引用animate动画函数 8.常见的网页特效案例 9.轮播图制作 10.筋斗云案例 学习内容： 1.offset系列 1)offset得到的是元素的偏移位置，返回不带单位的数值 2）它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，以body为准 3）返回的元素的大小，宽度，高度，是包含padding+border+width的值 4)offsetParent返回的
在firefox中诡异的element.style.left
yuyu1911的专栏
02-26 185
在运行《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) +...
JavaScript中style.left与offsetLeft的使用及区别详解
幻听
08-25 3088
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。 2. s
如何修改element.style的样式
m0_57454052的博客
04-07 2751
我们通常在用组件库或者调试web样式时 发现有 element.style这样的类名： 这种样式其实是行内样式导致的 //但是像element这种框架 没法修改行内样式 <el-tabs ref="navTabs" tab-position="left" style="height: 400px; margin-top: 100px" trigger='hover'> <el-tab-pane v-for="item in Solution.productVoLi
imglist.style.marginleft什么意思
最新发布
06-09
`imglist.style.marginleft` 是一个 JavaScript 中操作 DOM 元素的属性，它表示获取或设置一个元素的左边距（margin-left）的值。其中，`imglist` 是一个 DOM 元素对象，可以通过 `document.getElementById()` 或 `...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值