Js之offset属性与style属性的区别

Js之offset属性

offset翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置、大小等。
如果元素没有父级元素或者父级元素没有定位(祖先元素也可以)，则以body为父级
.offsetWidth和.offsetHeight 返回的宽和高是包括padding 内容区 border的，但是不包括margin。
所以获取的是元素的实际宽高 = width + border + padding.

注意：offsetTop 返回的是数字，不带单位。而 style.top 返回的是字符串，除了数字外还带有单位：“px”。

offset系列和style系列的区别

offse属性

offset 可以得到任意样式表中的样式值

offset 属性获取到的值是一个number类型，不带单位

offsetWidth，offsetHeight 包含padding+border+width

offsetWidth，offsetHeight 等属性是只读属性，只能获取不能赋值

所以，想要获取元素大小位置，用offset更合适。

Js之style属性

style属性

style 只能得到行内样式表中的样式值， offset都可以获得

style.width 获得的是带有单位的字符串（是字符串）

style.width 获得不包含padding和border 的值（获得的只是样式表里面写的width的值）

style.width 是可读写属性，可以获取也可以赋值

最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有left top right

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

所以，想要给元素更改值，则需要用style改变

代码加图加深理解

//css样式<style>div{height: 200px;width: 200px;background-color: blueviolet;margin: auto;}</style>//html<!-- div盒子 --><div>我是div</div>//js<script>var div = document.querySelector("div");// 获取元素高度console.log(div.offsetHeight);// 获取元素宽度console.log(div.offsetWidth);//获取元素距离父级顶部的距离，这里div的父级是document元素console.log(div.offsetTop);//获取元素距离父级左边的距离，这里div的父级是document元素console.log(div.offsetLeft);</script>

Js之offset属性与style属性的区别相关推荐

DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
DOM对象中的常用属性 innerHTML属性 innerText属性 className属性 style属性 innerHTML属性 innerHTML属性:用于设置或获取HTML 元素中的内容. ...
js中offset、client、scroll的区别
偏移量:offset dimension offsetHeight: 元素在垂直方向上占用的空间大小,以像素计.包括元素的高度.(可见的)水平滚动条的高度.上边框高度和下边框高度. offsetWid ...
HTML样式offset[Direction] 和 style.[direction]的区别
为什么80%的码农都做不了架构师?>>> 以offsetLeft与style.left为例: offsetLeft使用的值是字符串,如"100px", st ...
js外部样式和style属性的添加移除
在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...
js移除某个样式_js外部样式和style属性的添加移除
在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...
用js实现改变随意改变div属性style的名称和值的结果
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: <!DOCTYPE html> <html> <head> <me ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
java div style_用js实现改变随意改变div属性style的名称和值的结果
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: 函数传参,改变Div任意属性的值 body,p{margin:0;padding:0;} body{color:#3 ...
js 代码大全(各种方法、属性)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...

Js之offset属性与style属性的区别

Js之offset属性

Js之style属性

Js之offset属性与style属性的区别相关推荐

最新文章

热门文章