style.left不起作用

最新推荐文章于 2022-07-03 22:23:55 发布
原创 最新推荐文章于 2022-07-03 22:23:55 发布 · 4.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在HTML页面中使用JavaScript计算元素位置时，遇到的问题及解决方法。通过在计算公式中添加单位‘px’，实现了元素精确定位。

html文件第一行加了如下代码后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如下代码不起作用：

var element = document.getElementById(“test”);

element.style.top=(document.documentElement.clientHeight-element.clientHeight)/2+document.documentElement.scrollTop;

element.style.left=(document.documentElement.clientWidth-element.clientWidth)/2+document.documentElement.scrollLeft;

解决办法是加上单位px就好了，参考如下：

var element = document.getElementById("test");

element.style.top=(document.documentElement.clientHeight-element.clientHeight)/2+document.documentElement.scrollTop+"px";
element.style.left=(document.documentElement.clientWidth-element.clientWidth)/2+document.documentElement.scrollLeft+"px";
uni-app——uniapp 小程序中 css 不支持 xxx 语法, style 不支持 xxx 语法 （动态绑定函数）
qq_43201350的博客
05-01 991
uni-app——uniapp 小程序中 css 不支持 xxx 语法, style 不支持 xxx 语法 （动态绑定函数）
javascript中style.left和offsetLeft的用法说明
12-11
如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是...
style.left不起作用的问题
wwwjr00的博客
05-23 5607
最近调试程序：待续
微信小程序Style无效
huyuchaoheaven的专栏
03-13 4384
超过一行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
JavaScript 中的 style.top / style.left 不生效
qq_32539403的博客
09-17 4413
在 JS 中使用 .style.top 方法，如下，发现不生效。 var box = document.createElement('div'); box.style.top = 30; 解决： 需要添加单位 px、cm 等. var box = document.createElement('div'); box.style.top = 30 + “px”; ...
解读mpvue官方文档的Class 与 Style 绑定及不支持语法
dt1991524的博客
02-27 6507
在vue.js项目转化为小程序时，把原来页面的代码直接拷贝过去，发现布局改变很多，很多已经设置的标签的css样式并没有显示出来，查看官方文档，得知原来vue.js的Class 与 Style 绑定语法，有些不适合mpvue,以下总结几点： 一. :class绑定方式 (1).mpvue支持:class="{ active: isActive }" &lt;template&gt; &lt;d...
JavaScript中无法通过div.style.left获取值的解决方法
10-20
JavaScript在操作DOM元素位置的时候，经常需要用到style.left属性来获取或设置元素的水平位置。然而，在某些情况下，使用div.style.left获取元素的left属性值时，可能会遇到无法获取的状况。针对这个问题，本篇内容...
JS获取浮动(float)元素的style.left值为空的快速解决办法
10-20
1. 当一个元素设置了浮动(float)，例如`float: left`或`float: right`，并且没有通过行内样式设置`style.left`时，JavaScript的`style.left`属性将返回空字符串。 2. `style.left`属性返回的是一个带有单位（如`px`...
div的offsetLeft与style.left区别
10-21
在处理位置信息时，开发者经常会使用到offsetLeft和style.left这两个属性。尽管它们都与元素的位置有关，但是它们之间存在一些显著的区别。本文将详细介绍div元素的offsetLeft属性和style.left属性之间的差异，并...
JavaScript中style.left与offsetLeft的使用及区别详解
10-22
2. style.left可以读取也可以设置元素的left位置，offsetLeft只读不写。 3. style.left的值受到元素是否定义了内联style属性的影响，如果未定义，则返回空字符串。offsetLeft不依赖于样式的定义，即使元素没有内联...
element.style.left 和 element.offsetLeft 的区别
weixin_45840253的博客
08-18 498
1.element.style.left 只能获取行内样式， 2element.offsetLeft 当父级元素节点是定位时，获取的值则是相对父级的位置否则是相对body的位置的值 3.element.offsetLeft 获取的值是只读 element.style.left 是可读写
js获取style.left为什么为空？
yjyxw的博客
08-03 905
原因： element.style.left 只能获得element的行内样式，所以一般写在style或css文件内的left就无法获得。 内联样式就是直接加在某个元素属性中的样式。方法为<p style="color:white;"></p> 解决办法： 用element.offsetLeft来获取 ...
94 添加hover方法 和show hide 方法
小漠007的专栏
04-29 757
var $=function(_this)//调用,把this传递过来 {     return new Base(_this); }; //对象式 function Base(_this) {     //创建一个数组来获取节点和节点的数组     this.elements=[];//私有化，不共用     if(_this!=undefined)//这里的_this
margin-top:负值，padding-top:值--解决顶部一条白线的兼容性问题
liudan123012的博客
07-30 951
自定义顶部导航中遇到一个兼容性问题，顶部总是有一条不明白线，大多数手机都不会出现，但是有部分手机可能会出现。 我采用margin-top: -1px;padding-top: 1px;的方式来解决，发现好像可以实现。 //wxml <view class="navBar"> <view style="height: {{statusBarHeight}}px;></view> <view> <text style="line
JS获取页面的各种距离总结
stanwuc的博客
09-20 6585
1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度
PC端特效——动画函数
asdf1234dfty的博客
07-03 271
动画
this.style.left可给移动端赋值吗
最新发布
09-29
<think>嗯，用户询问关于在移动端使用'this.style.left'赋值的问题。需要仔细分析用户提供的参考资料，尤其是引用[1]中提到的element.style兼容性问题。 引用[1]明确指出，在移动端浏览器中直接给element.style赋字符串值会出现兼容性问题，用户通过alert调试发现卡在element.style赋值语句。解决方案是改用element.style.cssText。这个案例非常有参考价值，因为left属性正是style对象的一部分。 考虑到移动端浏览器环境的复杂性： - 不同厂商对Web标准的实现存在差异 - iOS和Android系统浏览器内核不同 - 微信内置浏览器等特殊环境可能有额外限制 虽然理论上this.style.left可以在PC端正常使用，但移动端确实存在隐患。引用[1]的解决方案建议使用cssText更可靠，这应该作为主要推荐方案。 另外注意到引用[2]提到viewport设置对移动端布局的影响。如果left值的计算依赖视口单位，不正确的viewport配置可能导致赋值失效，这也是需要提醒用户的潜在问题点。 用户可能是前端开发者遇到的实时调试困境，需要给出可立即实施的解决方案。除了核心的cssText方案外，还应该提供现代浏览器更推荐的classList方案作为最佳实践。 </think>关于在移动端使用 `this.style.left` 进行赋值的问题，结合引用信息和实践分析如下： ### 核心结论 ✅ **可以赋值，但存在兼容风险** `this.style.left` 在移动端基础功能可用，但**部分老旧移动浏览器（如低版本 Android WebView）可能触发兼容性问题**，需谨慎处理。 --- ### 关键问题与解决方案 1. **兼容性问题根源（引用[1]证实）** `element.style = "left: 100px"` 这种字符串赋值方式在多浏览器下表现不一致，尤其在移动端。 **✓ 可靠方案：改用 `cssText`** ```javascript // 错误写法（移动端可能失效） this.style.left = "100px"; // 正确写法（兼容移动端） this.style.cssText = "left: 100px;"; // 或追加属性（保留原有样式） this.style.cssText += "left: 100px;"; ``` 2. **布局依赖性问题** - 若元素未设置 `position: absolute/relative/fixed`，`left` 赋值无效（PC/移动端通用） - 移动端需确保 viewport 配置正确（引用[2]）： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 3. **性能优化建议** 高频更新位置时（如动画），优先使用 CSS3 Transform（GPU加速）： ```javascript this.style.transform = "translateX(100px)"; // 性能更优 ``` --- ### 操作示例 ```javascript // 兼容移动端的赋值方案 function setElementPosition(element, leftValue) { // 方案1：cssText（推荐） element.style.cssText += `left: ${leftValue}px;`; // 方案2：直接设置属性（需测试目标浏览器） // element.style.left = `${leftValue}px`; } // 调用示例 const box = document.getElementById("myBox"); setElementPosition(box, 100); ``` --- ### 移动端调试技巧 1. **远程调试工具** - Chrome DevTools → [chrome://inspect](chrome://inspect) 调试 Android WebView - Safari 开发菜单调试 iOS WebView 2. **异常捕获** ```javascript try { this.style.left = "100px"; } catch (e) { console.error("移动端赋值失败:", e); this.style.cssText += "left: 100px;"; // 自动降级 } ``` > **实践验证**：在主流移动浏览器（Chrome Mobile 105+、Safari iOS 14+）中，`this.style.left` 可正常赋值，但部分低端设备（如 Android 4.4 WebView）仍需 `cssText` 兜底[^1]。建议关键场景优先使用 **`cssText` 或 `classList`** 修改样式。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值