前端样式获取
前端 获取 样式
2023-09-11 14:19:18 时间
简介
一般我们有两种方式来获取前端的样式
第一种
- 获取的到元素,然后读取元素的
style
属性 - 这里获取的都是内敛标签上面的样式,在css样式表上面的是获取不到的
第二种
- 通过getComputedStyle来获取元素最终展示的样式
- 他可以获取多个属性
第三种
第三种只获取位置
- 使用
getBoundingClientRect
来进行获取
例子
<body>
<div id="box" style="width: 200px; height:200px;">
</div>
<style>
#box{
background-color: red;
}
</style>
<script>
const box = document.getElementById("box")
// 第一种方式
console.log(box.style);
// 第二种方式
console.log(getComputedStyle(box));
</script>
</body>
我们看他们的打印
他们打印的对象是相同的
box.style的打印
在属性是数字的,就表示能获取到的属性,他只有两个就是标签上的属性
getComputedStyle的打印
我们发现他有很多,也就是css的属性都能获取
getBoundingClientRect的打印
他获取的是DOM的一个对象
他是没有单位的,值获取大小和位置的信息
注意
我们获取到的位置信息他都是有单位的
相关文章
- Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor
- 前端js获取SpringMvc后台model中传值
- uni-app - 搜索历史记录功能(纯前端)
- 前端 - token 是什么?为什么每次请求头(HEADS)里要携带它?
- 你还搞不定前端性能测试?这里有一大波测试工具请拿走
- 前端面试日更解答 2020-03-22
- 【前端大神面考面试官系列】入门Vue全家桶
- 前端ast
- 「基于Django的全民健康智慧中医数字服务平台」前端应用API接口功能(三)
- 「Django 3.x 框架」前端模板获取 for 循环小结
- 转 php 前端知识点
- 使用webpack+vue.js构建前端工程化
- 《Web前端工程师修炼之道(原书第4版)》——互联网与Web
- 后端传验证码图片前端ajax怎么显示图片
- 2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇
- 前端使用lodop如何获取打印状态
- 如何实现前端微服务化
- 前端技术:vue(基本使用+安装chrome vue插件)
- thinkphp 获取前端传递过来的参数