获取元素计算样式getComputedStyle()与currentStyle
2024-08-23 19:51:06
window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
目前主流浏览器均支持getComputedStyle()获取元素计算样式。
语法:
getComputedStyle(element [,pseudoElt])
element
用于获取计算样式的Element。
pseudoElt
可选
指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。
案例:
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title></title>
<style>
h3::after {
content: "rocks!";
}
</style> </head> <body> <h3>generated content</h3>
<script>
let h3 = document.querySelector('h3'),
result = getComputedStyle(h3, '::after').content; console.log(`the generated content is: ${result}`);
//=> the generated content is: "rocks!" </script>
</body> </html>
参考文献:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
currentStyle是微软推出的针对IE浏览器的标准,并非标准接口,主要是对IE8及以下版本支持该属性。
语法:
elementget.currentStyle
微软开发文档参考:
https://docs.microsoft.com/en-us/previous-versions//ms528441(v=vs.85)
实际开发过程中,若需要考虑两者的兼容性:
/*obj为元素DOM,name为元素属性,类型为字符串。可以通过360浏览器可以单独测试IE浏览器下的情况。
*
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
}
最新文章
- Hadoop的安装与设置(1)
- 《Git教程-廖雪峰》学习笔记
- thinkPHP5.x 更新字段为 NULL
- Linux系统man查询命令等级及意义
- POJ3680_Intervals
- 安卓开发笔记——自定义广告轮播Banner(实现无限循环)
- [BZOJ2753][SCOI2012]滑雪与时间胶囊(特殊的有向树形图)
- 如何引用XML文件生成C#类
- hdu5816 卡特兰数+dp
- mysql 修改字段长度
- 永久的CheckBox(单选,全选/反选)!
- Swift与Objective-C的对比
- WinForm RDLC SubReport Step by step
- Linux下使用cat制作“内涵图”
- C库源码中的移位函数
- iOS UIView Class Translation
- Emacs 中 GDB 的使用
- 局域网 FTP建立,搭建一个简易的局域网服务器
- js定时函数,定时改变字体的大小
- 机器学习技术点----apachecn的github地址
热门文章
- 2017-18一《电子商务概论》本科作业-商A1551
- Kubernetes K8S之存储ConfigMap详解
- 从源码的角度解析Mybatis的会话机制
- 制作西北地区地图数据并maskout
- 关于umi-request GET请求参数携带数组
- 基于python实现二叉树的遍历
- elk-架构图
- golang 爬取百度贴吧绝地求生页面
- spring boot:spring security给用户登录增加自动登录及图形验证码功能(spring boot 2.3.1)
- linux(centos8):用fallocate快速生成大文件