style.left或style.top设置位置与浏览器

最新推荐文章于 2023-12-28 15:30:33 发布
原创 最新推荐文章于 2023-12-28 15:30:33 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html



style.left或style.top设置位置IE好的，到谷歌不认？

解决方法 ：加上"px";iE认纯数值，谷歌不认，所以为保证都认，养成+“px”的习惯

DMX66
关注
style.left style.top style.width style.height
10-24 232
除非left和top是内联样式，或者初始单独拿出来赋值，否则直接使用，得到的值就是null，都特么是坑啊，取值的时候可以用offsetLeft offsetTop clientWidth clientHeight（看情况用scrollLeft和scrollTop，offsetWidth和offsetHeight） 转载于:https://www.cnblogs.com/Hi-baby/...
style.top style.left 在IE和FireFox的区别
longfeiwang－robin 专栏
12-19 556
style.top style.left 在IE和FireFox的区别
Js中如何获取style标签中的left、top值
六仔的博客
02-19 2805
JS中如何获取style标签中的left、top值 使用offsetleft和offsettop 具体代码如下： var left = document.getElementById("dv").offsetLeft;//数字类型没有px
style.left 与 style.top 在 IE和FireFox的兼容问题
zhufengming的专栏
07-13 1062
通常,我們都是使用document.getElementById("ObjectName").style.top取得該物件所在位置, 在ie跟firefox下,都可以取得類似如下格式的資料 177px 而如果要設定的話, 在ie下可以直接使用下列的語法來設定. document.getElementById("ObjectName").style.top = 200; 但是,這樣
设置firefox元素的style.left属性
Feiin的专栏
11-04 1048
今天在js定位div时候，发现在firefox对div元素的style.left属性赋值老是不起作用,整了很久才发现赋值出了小点问题原来是：suggestDiv.style.left=pos.Left;修改后suggestDiv.style.left=pos.Left+"px";//修改后才起作用
【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx
12-28
### JavaScript Style 对象与 CurrentStyle 对象详解 #### 一、Style 对象 **定义**： - `Style` 对象代表一个单独的样式声明，它可以从应用样式的文档元素访问。`Style` 对象主要用来获取元素的内联样式，即元素...
CSS和JS标签style属性对照表(方便js开发的朋友).docx
01-13
- JavaScript 中，设置 `clear` 为 `none`, `left`, 或 `right`，如 `element.style.clear = "right";`。而设置 `float` 用 `element.style.float = "left";`。 3. **外边距和内填充（Margin and Padding ...
js取得DIV的top,left,width,height值.doc
08-08
总的来说，获取JavaScript中DOM元素的`top`, `left`, `width`, `height`值涉及多个方法和属性，具体使用哪种取决于你的需求，如精确的视口位置、CSS样式或相对于父元素的位置等。同时，浏览器信息的检测也是Web开发...
原生js获取left值和top值的三种方法
10-19
在JavaScript中，获取元素的`left`和`top`值对于实现动态效果，特别是...无论哪种方式，都需要确保元素设置了`position:absolute`或`position:relative`的绝对定位属性，因为只有绝对定位的元素才有`left`和`top`属性。
js弹出层可拖动兼容各大浏览器.pdf
10-28
【JavaScript 弹出层实现与浏览器兼容性】 在网页开发中，JavaScript 弹出层（通常称为对话框或模态窗口）是一种常见的交互设计元素，用于显示临时信息、用户确认或进行复杂操作。本文将详细讲解如何创建一个可拖动...
44. 将样式表放在顶部(5)
enlyhua的专栏
10-09 353
将样式表放在顶部(Put Stylesheets at the Top) 1.逐步呈现(Progressive Rendering) http://stevesouders.com/hpws/css-bottom.php http://stevesouders.com/hpws/css-top.php
offsetLeft、clientHeight、scrollLeft、clientLeft
weixin_30436101的博客
04-28 326
1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 ob...
vue中的:style
weixin_58689699的博客
12-28 1141
vue中可以在:style="{ }"里面加样式，但是写法和css不一样，是使用驼峰式写法，-去掉，然后连接的地方大写。
style.pixelLeft;style.posLeft等的一些定位元素
深水蓝的专栏
05-08 3777
style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值. style.posLeft返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em scrollLeft 设置或获取位于对象左边界和窗口中目
前端开发中游览器的兼容问题总结
weixin_45743799的博客
02-07 1080
首先，为什么各种浏览器会产生兼容性问题？ 产生这个问题的主要原因是市面上的浏览器的种类很多，但由于不同的浏览器的内核不一致，从而导致各个浏览器对网页的解析就产生了差异。 对于解决浏览器兼容性问题，我们要从三个方面入手：html部分、css部分、js部分。 1、html部分 1、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标...
html自动适配手机还是电脑,html页面手机和电脑显示不一致
weixin_42515336的博客
05-31 991
问题描述想让html网页在手机和电脑显示时,元素都是居中的,但是我不太会前端,试过一些网上找的居中的方法还是不行,只好将长和宽以及边距等都写死,让手机端的显示是居中的(因为该页面访问基本都是手机端用户)电脑页面手机页面问题出现的环境背景及自己尝试过哪些方法使用过的方法:1.设置left,top的百分比main{position: absolute;top: 50%;left: 50%;margin...
IE,谷歌浏览器的兼容性问题总结
热门推荐
Hank的博客
05-21 1万+
var oldtime = (new Date(this.props.data.create_time)).getTime()/1000; var nowtime = Date.parse(new Date())/1000; 这个时间转化在谷歌，火狐浏览器中能正确的获取到正确的数据。但是在IE浏览器却出现了问题。 打出的时间却是NAN。 NaN类型指的是一种特殊的number(但是N
var hdcs1 = document.getElementById('hdsc1'); var sc1 = document.getElementById('sc1'); var hdcs2 = document.getElementById('hdsc2'); var sc2 = document.getElementById('sc2'); hdcs1.addEventListener('tap',function(){ hdcs1.style.marginLeft = "-15%"; sc1.style.top = "1%"; sc1.style.left = "55%"; sc1.style.display = "block"; }) sc1.addEventListener('tap',function(){ sc1.style.display = 'none'; hdcs1.style.display = 'none'; }) hdcs2.addEventListener('tap',function(){ hdcs2.style.marginLeft = "-15%"; sc2.style.top = "1%"; sc2.style.left = "55%"; sc2.style.display = "block"; }) sc2.addEventListener('tap',function(){ sc2.style.display = 'none'; hdcs2.style.display = 'none'; }); 我想让他继续添加sc3，hdsc3,我该怎么改
最新发布
12-23
要在现有的 JavaScript 代码中添加 `sc3` 和 `hdsc3` 的相关功能，可参考现有的代码逻辑，对新元素进行同样的操作。以下是修改后的代码： ```javascript var hdcs1 = document.getElementById('hdsc1'); var sc1 = document.getElementById('sc1'); var hdcs2 = document.getElementById('hdsc2'); var sc2 = document.getElementById('sc2'); // 获取新元素 var hdcs3 = document.getElementById('hdsc3'); var sc3 = document.getElementById('sc3'); hdcs1.addEventListener('tap', function () { hdcs1.style.marginLeft = '-15%'; sc1.style.top = '1%'; sc1.style.left = '55%'; sc1.style.display = 'block'; }); sc1.addEventListener('tap', function () { sc1.style.display = 'none'; hdcs1.style.display = 'none'; }); hdcs2.addEventListener('tap', function () { hdcs2.style.marginLeft = '-15%'; sc2.style.top = '1%'; sc2.style.left = '55%'; sc2.style.display = 'block'; }); sc2.addEventListener('tap', function () { sc2.style.display = 'none'; hdcs2.style.display = 'none'; }); // 添加 hdcs3 和 sc3 的事件处理 hdcs3.addEventListener('tap', function () { hdcs3.style.marginLeft = '-15%'; sc3.style.top = '1%'; sc3.style.left = '55%'; sc3.style.display = 'block'; }); sc3.addEventListener('tap', function () { sc3.style.display = 'none'; hdcs3.style.display = 'none'; }); ``` ### 相关问题 1. 如何优化这段代码以减少重复部分？ 2. 如果要添加更多类似的元素，代码结构应该如何调整？ 3. `tap` 事件在不同浏览器中的兼容性如何？ 4. 如何为这些元素的显示和隐藏添加动画效果？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值