js 对于样式的操作

KoreyLee 发布于2019-08-20 18:35 / 512人阅读

摘要：原生中提供了不少对于样式的操作，很多时候一直容易弄混乱，索性总结下一行间样式的操作获取的是行间的样式，可读可写二计算后样式操作只读属性，获取所有浏览器渲染后的样式兼容使用兼容获取相对于可视区的以及盒子的宽和高盒子宽高盒子宽高

原生js中提供了不少对于样式的操作，很多时候一直容易弄混乱，索性总结下

一：行间样式的操作

Element.style
获取的是行间的样式，可读可写

二：计算后样式操作

1.getComputedStyle()

只读属性，获取所有浏览器渲染后的样式

 let style = window.getComputedStyle(element, [pseudoElt]);
 getComputedStyle(div).marginRight

兼容：IE9- 使用 currentStyle兼容

2.getBoundingClientRect()

获取相对于可视区的top leift bottom right 以及盒子的宽和高

3.clientWidth /clientHeight

盒子宽高+padding

4.offsetWidth/offsetHeigth

盒子宽高+padding+boder

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84721.html

根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

phodal 2019-08-23 13:39 评论0 收藏0
根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

daryl 2019-08-02 12:05 评论0 收藏0
根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘（repaints）与回流（reflows）

摘要：渲染阻塞在浏览器进行加载时，其实是并行加载所有资源。则就叫称为重绘。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。前面有讲到当用户在浏览器输入url之后，经过一系列的过程，会最终向服务器请求到文档数据，文档数据请求到之后，浏览器会将这些数据传给浏览器渲染引擎，渲染引擎开始正式工作了。构建...

ranwu 2019-08-29 17:22 评论0 收藏0
前端每周清单半年盘点之 CSS 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...

RaoMeng 2019-08-29 13:21 评论0 收藏0
使用purifycss精简css

摘要：解决在精简的时候，需要把里面的相对路径替换成绝对路径将中的引用的相对路径转化为绝对路径精简后，破坏了通用模块的缓存这其实是一个取舍问题。解决不精简通用模块，只精简具体业务相关的。随着项目的不断迭代，我们的css会不断变大，但通常页面上需要用到的样式并没有那么多，很多样式是无用的，而如果靠人工去剔除，吃力又容易出错。有痛点就应该去想办法解决。那么有没有办法通过自动化来把这些无用的样式...

ethernet 2019-08-20 14:43 评论0 收藏0