开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >HTML样式offset[Direction] 和 style.[direction]的区别

HTML样式offset[Direction] 和 style.[direction]的区别

LeoXu

发布于 2018-08-15 06:34:55

发布于 2018-08-15 06:34:55

7670

举报

文章被收录于专栏：LeoXu的博客LeoXu的博客

以offsetLeft与style.left为例：

offsetLeft使用的值是字符串，如“100px", style.left则使用数值，如 100
offsetLeft只可以读，因此用无法通过Js改变这个值实现样式的改变， style.left是可读写的，因此可以通过改变这个值调整div的位置
style.left的值需要事先定义，否则取的时候返回空
Js访问方法：[Element].offsetLeft, [Element].style.left

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014/09/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

HTML5魔法堂：全面理解Drag & Drop API

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在HTML4的时代，各前端工程师为了实现拖拽功能可说是煞费苦心，初听HTML5的DnD API觉得那些痛苦的日子将一去不复返，但事实又是怎样的呢？下面我们一起来看看DnD API的真面目吧！二、由于篇幅较长，特设目录一陀　　　　　　　　　　　　　　　　　　　　　　三、HTML4下实现简单拖拽四、HTML5下实现简单拖拽五、如何启用DnD效果六、draggable属性详解七、DnD的生命周期八、DnD中最重要的数

^_^肥仔John

2018/01/18

4K0

HTML5魔法堂：全面理解Drag & Drop API

style对象的cssText方法

https 网络安全 java html

在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：

全栈程序员站长

2022/09/17

8550

元素偏移量 offset 系列

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

星辰_大海

2020/09/30

1.2K0

【如果你要学JS XII】——使用js实现模态框拖动

前端 2023腾讯·技术创作特训营第四期

这篇文章来实现一下js中的放大镜效果，以及如何实现模态框拖动效果先来了解一下offset，client和scroll系列属性

像素人

2023/12/25

1670

【如果你要学JS XII】——使用js实现模态框拖动

【javaScript】cssText兼容及好处（相对于element.style）

css https html java 网络安全

document.getElementById(“d1”).style.cssText = “color:red; font-size:13px;”; cssText 返回值是什么？

全栈程序员站长

2022/09/17

6640

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）

node.js 编程算法 html

HTML精确定位：scrollLeft,scrollWidth,clientWidth,offsetWidth

山河木马

2019/03/05

7.9K0

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）

getElementById返回的是什么？串讲HTML DOM[通俗易懂]

html java css node.js 网站

　　这个函数使用的最普遍，但是你有没有深入探究下，这个函数究竟返回的是什么么？我们来一起看看。

全栈程序员站长

2022/09/07

2.9K0

getElementById返回的是什么？串讲HTML DOM[通俗易懂]

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

全栈程序员站长

2022/09/16

7.5K0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

js中offset系列、client系列、scroll系列和screen系列详解

element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + border值；

IT工作者

2022/05/12

6230

2021前端面试高频 HTML + CSS

网络安全 css

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

程序员海军

2021/10/11

9560

2021前端面试高频 HTML + CSS

从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

在 window 下有一个方法：window.getComputedStyle(element, string) 可以获取一个元素所有的属性值。

Daotin

2018/08/31

1.2K0

TypeScript 贪吃蛇游戏详细教程

typescript 游戏 webpack node.js json

我们这个项目使用webpack来打包构建，所以需要安装webpack的相关的一些依赖，把webpack和TypeScript等一些东西整合一下，以方便我们后面整个项目的开发。

害恶细君

2022/11/22

1.2K1

TypeScript 贪吃蛇游戏详细教程

初识HTML(四)---CSS(超详细)

css html vue.js

简单来说css就是来控制元素样式的 w3school 手册为什么要用css呢样式重复以及代码看着难受等问题如下图对比

代码哈士奇

2021/01/26

4050

初识HTML(四)---CSS(超详细)

scrollwidth和clientwidth_vue监听页面滚动

node.js javascript html 编程算法

本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。

全栈程序员站长

2022/10/04

1.8K0

从零开始学 Web 之 BOM（二）定时器

多次点击“摇起来”按钮的时候，timeId 的值会有多个，而停止的时候，只会清理最后一个值，其他的值对应的定时器没有清理。

Daotin

2018/08/31

1.4K0

再来利用java学学javaweb——–html+css+ JavaScript[通俗易懂]

https html java 网络安全

* 表单项标签： * input：可以通过type属性值，改变元素展示的样式 * type属性： * text：文本输入框，默认值 * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 * password：密码输入框 * radio:单选框 * 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 * checkbox：复选框 * 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值

全栈程序员站长

2022/09/14

2.3K0

前端学习(48)~通过style对象获取和设置行内样式

需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如：

Vincent-yuan

2020/03/19

1.4K0

23个项目管理经典案例_交互动画

json javascript html https 网络安全

注意： speed = (end - box.offsetLeft)/20; 代表用（终点位置-当前位置）/动画系数动画系数可以控制动画的快慢

全栈程序员站长

2022/11/03

1.8K0

前端day12-JS(WebApi)学习笔记(操作元素属性，事件介绍)

api javascript html css c#

硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树（document） -> 开始渲染页面

帅的一麻皮

2020/04/16

1.6K0

前端day12-JS(WebApi)学习笔记(操作元素属性，事件介绍)

js运动框架逐渐递进版

运动，其实就是在一段时间内改变left、right、width、height、opactiy的值，到达目的地之后停止。

wfaceboss

2019/04/08

1.9K0

相关推荐

HTML5魔法堂：全面理解Drag & Drop API

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

[读书笔记]响应式web设计转

加入讨论

的问答专区 >

1北京宏哥擅长4个领域

相关课程

一站式学习中心 >

AI驱动的TDSQL-Cserverless实战营

云原生数据库 TDSQL-C

腾讯云WeData大数据开发与治理训练营

数据开发治理平台 WeData

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验