知乎上扒了一个链接，实例索引，刚好可以小白的我练手哈哈哈。为了练习js我也是煞费苦心
界面图：
主要实现：点击不同的按钮，能够实现对应的样式，并且是之前的样式进行清零。
第一反应是进行添加类名控制，但是有点啰嗦了，所以用数组进行控制：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color: black;
margin:50px;
}
</style>
</head>
<body>
<input type="button" value='变宽'>
<input type="button" value='变高'>
<input type="button" value='变色'>
<input type="button" value='隐藏'>
<input type="button" value='重置'>
<div id='div'></div>
<script>
window.onload = function () {
//页面加载完成之后在进行
//做数据 设置变化的
let cssName=["width","height","background","display","display"];
let cssStyle=["200px","200px","pink","none","block"];
let div = document.getElementById('div');
//获取所有的input事件 然后为每一个注册点击事件
let AllInput = document.querySelectorAll('input'); //是数组
//遍历一波
AllInput.forEach((value,index)=>{
value.onclick= function(){
//在每一个点击之前清楚之前的样式
div.style.cssText='';
//每一个都组成点击事件 然后
div.style[`${cssName[index]}`] = cssStyle[index];
}
})
}
</script>
</body>
</html>
这个比较简单 主要是回顾一下cssText 以及牵扯到的其他知识
进行一个页面的具体操作步骤：
- HTML进行解构，构建DOMtree
- CSS进行解构，构建CSSOM tree
- 合并html和css 生成渲染render树
- 进行布局，也就是进行回流reflow
- 给像素值，也就是进行绘制repain
重绘（repaints）和回流（reflow）：
回流（reflow）：重新更新或者创建一个DOM树，或者是更新frame结构。只要一回流，页面就会全局！全局！全局！渲染。会导致页面的卡顿，性能低下。
1.并且改变了一些css样式的时候，就会造成回流（如下面所示offset）。
2.最最最重要的是，在js中生成的dom的插入删除等，造成的回流会更恐怖。
3.窗口的改变啊、文字大小的改变、添加删除样式、激活伪类等只要会改变dom结果的，或者是影响像素啊什么的都会进行回流的。
解决回流的问题 ：
（1）脱离文档流，进行的操作不会有任何的影响，就不会造成回流，比如：position：absolute/fixed，display：none；float啊什么的，但是浮动还是少用吧。经常会导致回流的元素就进行脱离文档流吧，尽量不要影响其他元素的布局。
（2）改变CSS的样式就会造成回流的几个属性：offset(Top/Left/Width/Height);scroll(Top/Left/Width/Height);client(Top/Left/Width/Height),getComputedStyle(),currentStyle()。尽量避免使用
getComputedStyle是原生获取出去width/height等其他属性的方法
（3）插入和删除dom树里的东西，要是生成10次，那么就会回流10次，因此就是要减少，最好是封装成一个方法，在进行增删的时候再进行调用。
copy来的代码：
//这个是不好的示范，会多次回流
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName("tr");
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
//这是好的释放，在dom树外部进行操作，减少回流的次数，
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
}
}
//然后调用它
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName("a");
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
（4）尽可能限制reflow的影响范围，修改DOM层级较低的结点。不要通过父级元素影响子元素样式。最好直接加在子元素上。改变子元素样式尽可能不要影响父元素和兄弟元素的尺寸像素。
（5）不要用tables布局。tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
（6）避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU.
（7）尽量不要频繁的增加、修改、删除元素，可以先把DOM节点抽离到内存中进行复杂的操作然后再display到页面上。（display:none的节点不会被加入render tree，而visibility:hidden会；display:none会触发reflow，而visibility:hidden只会触发repaint，因为layout没有变化
（8）是无法完全避免回流的，因为每一个操作都有可能造成页面的回流，所以只能够尽量避免回流。
ps：后面几点都是copy来的，原文指路：
https://blog.csdn.net/u013100656/article/details/79888106
重绘（repaints）：是和i一个元素外观改变所触发的浏览器行为。改变就是样式，什么background，outline等，重绘不一定会带回来回流，因为重绘不一定会带来重新布局。
解决重绘的问题：
解决重绘最简单的办法就是不要给每个元素都直接设置样式的改变，可以使用类名进行控制，也就是在js中控制样式，使用对象或者数组的办法来控制样式，也就是这样的，也就是添加类名，添加类名好吧？
document.getElementById(element).className = ‘ClassName’;
CSSText
cssText的本质就是设置html的style属性。
通常用法：
document.getElementById("element").style.cssText = "color:red; font-size:13px;"; //封号隔开
但是在IE中有些难受，你这样设置之后，会将样式转换成了大写，并且会把最后一个样式的封号去掉
FONT-SIZE: 13px; COLOR: red
使用cssText就是能够尽量的避免页面的回流（reflow），但是每一次cssText的时候，都会将之前的样式删除掉，但是我们可以拼接啊！！！
Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’
但是由于IE会把我的封号去掉，因此在进行添加之前，添加一个封号
Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’
ok，昨晚的补上。
