如何通过JavaScript获取元素的计算样式？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1236个文字，预计阅读时间需要5分钟。
背景：使用CSS控制页面有四种方式，分别为行内样式、内嵌样式、链接式和导入式。
行内样式：直接写在HTML标签的style属性中，如``。
内嵌样式：在HTML文档的部分使用标签定义，如`div{width:100px; height:100px;}`。
链接式：通过链接外部CSS文件实现样式控制，如``。
导入式：使用@import指令在CSS文件中导入另一个CSS文件，如`@import url(styles.css);`。
背景
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。
- 行内样式(内联样式)即写在html标签中的style属性中，如 <div style="width:100px;height:100px;"></div>
- 内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>
- 链接式即为用link标签引入css文件，例如<link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" />
- 导入式即为用import引入css文件，例如@import url("test.css")
如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。
获取计算样式
元素的style下的属性，默认为空字符串；
获取计算后的样式（非行间样式）:
getComputedStyle(element).属性
获取到的结果为 带单位的字符串 ，如 ：100px;
写法： getComputedStyle(box).height；
获取宽高（尺寸）
- ele.clientHeight/Width 支持padding,不包含边框，元素可视区宽度；
- ele.offsetWidth/Height 包含padding、border
以上2个，如果设置一个固定值，就以固定值为依据显示，不会以被内容撑开显示； - ele.scrollWidth/Height被内容撑开的高度（不包含边框）；
无论是否设置固定样式，都以被内容撑开我显示结果； - 边框尺寸
- clientLeft/clientTop边框尺寸
- getComputedStyle(box3).borderTopWidth 边框尺寸
以上获取到的都是不带单位的数字，并且范围为可视区；
绝对位置
元素距离
- offsetParent 定位父级，没有定位父级走body;
- offsetLeft 当前元素（左外边框）到定位父级的（左内边框）距离；
- offsetTop 当前元素（上外边框）到定位父级的（上内边框）距离；
获取的是不带单位的数字。
如果要使用上面的属性，一定要做到以下几点：
1、子集有绝对定位；
2、定位父级也一定要有定位；
3、自己和父级都要有宽高（触发haslayout,zoom:1）;
- getBoundingClientRect()
当前元素到页面可视区的尺寸、距离；
注意:
是跟滚动条走的。
也就是拖动滚动条值会变；
包含：width/height/left/right/top/bottom/x/y
写法：box2.getBoundingClientRect(）；
使用定位距离做一个小例子：
let timer = null; box.onclick =function (){ timer = setInterval(()=>{ box.style.left= box.offsetLeft + 1 +'px'; },16.7) }
在此了解以下渲染帧：
渲染帧是指浏览器一次完整绘制过程，帧之间的时间间隔是DOM视图更新的最小间隔。 由于主流的屏幕刷新率都在60hz，因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。
封装绝对位置
// 使用边框、定位位置 class Tools { position(ele){ let left = 0; let top = 0; let obj = ele; while(obj){ // t = 当前元素的外边距 + 当前元素边框 left += obj.offsetLeft + obj.clientLeft; top += obj.offsetTop + obj.clientTop; //重新设置Obj是谁，让obj变为当前的定位父级 obj = obj.offsetParent; //box3 -> box2 -> box1 -> } left -= ele.clientLeft; //多加一次box3的border,所以要减去 top -= ele.clientTop; return { left, top } } } let t1 = new Tools; console.log(t1.position(box3).top);
返回顶部的小例子
<style> *{ margin:0; padding:0; } #box{ width:100px; height:50px; font-size:20px; text-align: center; line-height: 50px; color:#fff; background: red; cursor: pointer; position:fixed; bottom:0; right:0; display: none; } body,html{ height:3000px; } </style> </head> <body> <div id="box">返回顶部</div> <script> window.onscroll = function(){ // console.log(window.pageYOffset); if(window.pageYOffset >= 600){ box.style.display = 'block'; }else{ box.style.display = 'none'; } } let timer = null; box.onclick = function(){ let t = window.pageYOffset; timer = setInterval(() => { t-=100; if(t <= 0){ t = 0; clearInterval(timer); } window.scrollTo(0,t); }, 16.7); } </script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计1236个文字，预计阅读时间需要5分钟。
背景：使用CSS控制页面有四种方式，分别为行内样式、内嵌样式、链接式和导入式。
行内样式：直接写在HTML标签的style属性中，如``。
内嵌样式：在HTML文档的部分使用标签定义，如`div{width:100px; height:100px;}`。
链接式：通过链接外部CSS文件实现样式控制，如``。
导入式：使用@import指令在CSS文件中导入另一个CSS文件，如`@import url(styles.css);`。
背景
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。
- 行内样式(内联样式)即写在html标签中的style属性中，如 <div style="width:100px;height:100px;"></div>
- 内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>
- 链接式即为用link标签引入css文件，例如<link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" />
- 导入式即为用import引入css文件，例如@import url("test.css")
如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。
获取计算样式
元素的style下的属性，默认为空字符串；
获取计算后的样式（非行间样式）:
getComputedStyle(element).属性
获取到的结果为 带单位的字符串 ，如 ：100px;
写法： getComputedStyle(box).height；
获取宽高（尺寸）
- ele.clientHeight/Width 支持padding,不包含边框，元素可视区宽度；
- ele.offsetWidth/Height 包含padding、border
以上2个，如果设置一个固定值，就以固定值为依据显示，不会以被内容撑开显示； - ele.scrollWidth/Height被内容撑开的高度（不包含边框）；
无论是否设置固定样式，都以被内容撑开我显示结果； - 边框尺寸
- clientLeft/clientTop边框尺寸
- getComputedStyle(box3).borderTopWidth 边框尺寸
以上获取到的都是不带单位的数字，并且范围为可视区；
绝对位置
元素距离
- offsetParent 定位父级，没有定位父级走body;
- offsetLeft 当前元素（左外边框）到定位父级的（左内边框）距离；
- offsetTop 当前元素（上外边框）到定位父级的（上内边框）距离；
获取的是不带单位的数字。
如果要使用上面的属性，一定要做到以下几点：
1、子集有绝对定位；
2、定位父级也一定要有定位；
3、自己和父级都要有宽高（触发haslayout,zoom:1）;
- getBoundingClientRect()
当前元素到页面可视区的尺寸、距离；
注意:
是跟滚动条走的。
也就是拖动滚动条值会变；
包含：width/height/left/right/top/bottom/x/y
写法：box2.getBoundingClientRect(）；
使用定位距离做一个小例子：
let timer = null; box.onclick =function (){ timer = setInterval(()=>{ box.style.left= box.offsetLeft + 1 +'px'; },16.7) }
在此了解以下渲染帧：
渲染帧是指浏览器一次完整绘制过程，帧之间的时间间隔是DOM视图更新的最小间隔。 由于主流的屏幕刷新率都在60hz，因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。
封装绝对位置
// 使用边框、定位位置 class Tools { position(ele){ let left = 0; let top = 0; let obj = ele; while(obj){ // t = 当前元素的外边距 + 当前元素边框 left += obj.offsetLeft + obj.clientLeft; top += obj.offsetTop + obj.clientTop; //重新设置Obj是谁，让obj变为当前的定位父级 obj = obj.offsetParent; //box3 -> box2 -> box1 -> } left -= ele.clientLeft; //多加一次box3的border,所以要减去 top -= ele.clientTop; return { left, top } } } let t1 = new Tools; console.log(t1.position(box3).top);
返回顶部的小例子
<style> *{ margin:0; padding:0; } #box{ width:100px; height:50px; font-size:20px; text-align: center; line-height: 50px; color:#fff; background: red; cursor: pointer; position:fixed; bottom:0; right:0; display: none; } body,html{ height:3000px; } </style> </head> <body> <div id="box">返回顶部</div> <script> window.onscroll = function(){ // console.log(window.pageYOffset); if(window.pageYOffset >= 600){ box.style.display = 'block'; }else{ box.style.display = 'none'; } } let timer = null; box.onclick = function(){ let t = window.pageYOffset; timer = setInterval(() => { t-=100; if(t <= 0){ t = 0; clearInterval(timer); } window.scrollTo(0,t); }, 16.7); } </script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。