一、通过js知识来操作css样式
DOM操作：通过js可以操作网页中的元素和样式
行内样式：直接在标签中style样式 js中设置的样式就称为js样式
js样式的优先级低于行内样式，但大于外部css和内联样式
若在用js脚本来获取元素的样式只能获取到js样式和行内样式，而外部引入的css样式和内联样式获取不到
案例1：随机颜色生成
<style>
.box {
color: red;
/* opacity: 1;
background-color: ; */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">111</div>
<script>
let box = document.querySelector(".box")
//dom操作: js可以操作网页中的任意信息
let r = Math.round(Math.random() * 255)
let g = Math.round(Math.random() * 255)
let b = Math.round(Math.random() * 255)
box.style.color = `rgb(${r},${g},${b})` //这里使用的是反引号
box.style.backgroundColor = `rgb(${g},${r},${b})`
console.log(box.style)
console.log(window.getComputedStyle(box))//获取box元素的计算样式（已经计算好的样式属性）
</script>getComputedStyle(n）：获取指定元素n的计算样式，已经计算好了的，包括元素的尺寸，边框、边距、背景等，返回的是一个只读对象
<script>
const box = document.getElementById('box');//获取元素
const computedStyle = getComputedStyle(box);
const width = computedStyle.width;
const height = computedStyle.height;// 获取计算好的宽度和高度
const paddingTop = computedStyle.paddingTop;
const paddingBottom = computedStyle.paddingBottom;// 获取计算好的内边距
console.log(width, height, paddingTop, paddingBottom);
<//script>n.style：用于获取和设置、修改元素的样式，getcomputedStyle()是不可修改的
案例2：设置一个边框，每隔1秒边框的高度增加4px，若高度值大于800px了，则停止
分析：（1）获取元素
（2） 这里需要用到计时器setInterva()用于设置延时的秒数
（3）在计时器中获取现在的高度（h），在现在的高度上再添加值（4px）并赋值给元素（newh）
（4）判断高度是否达到800px，若大于800，则清除计时器
var box = document.getElementsByClassName("box")[0]
var timer = setInterval(() => {
let newh = parseFloat(getComputedStyle(box).height) + 4
box.style.height = newh + "px"
if (newh >= 400) {
clearInterval(timer)
}
}, 1000)案例3：点击图片，然后背景图片换成该图片
<style>
img {
width: 100px;
height: 100px;
}
</style>
<div class="box">
<img class="one" src="./imag/OIP-C 4.jfif" alt="">
<img class="two" src="./imag/OIP-C.jfif" alt="">
<img class="thr" src="./imag/OIP-C9.jfif" alt="">
</div>
<script>
var c = document.querySelectorAll("img")
var d = ["url(./imag/OIP-C 4.jfif)", "url(./imag/OIP-C.jfif)", "url(./imag/OIP-C9.jfif)"]//创建一个数组，将图片装进去
for (let i = 0; i < c.length; i++) {
c[i].onclick = function () {//给每个元素都绑定点击事件
console.log(i)
document.body.style.backgroundImage = d[i]//若点击事件触发，点击哪个图片，就将哪个图片设为背景图片
}
}
</script>效果图最后一次点击的是第三个图片，背景就变成了该图片
二、表单（input）操作：
与前面用标签写的表单标签相比，js中编写的各种功能具有可编程性
1.获取表单和表单元素：获取方式和前面获取元素的方法一样（getElementById、querySelector、getElementsByTagName、）
（1）获取表单：获取整个表单元素本身，包括表单的属性、事件和子元素等
（2）获取表单元素：获取表单中的具体表单字段或控件元素如：文本框、复选框、下拉列表等
2.表单和表单元素的属性和方法
<script>
var input = document.querySelectorAll("input")//获取所有
//表单方法
input.submit()//提交表单
input.reset()//重置表单
//表单元素属性
input.type //可读可写，表单元素类型
input.form//包含该元素的form表单对象，不存在返回null
input.name //可读可写，元素的名称
input.value//可读可写，输入框的值
</script>三、页面的渲染流程
1.页面呈现过程
不同的浏览器略微会有些不同。但基本上都是类似的
①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。
②浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。
③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。但是visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。
④一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。
2.回流与重绘
① 当render tree中因为元素的数量,尺寸，布局，隐藏等改变而需要重新构建。这就称为回流或者回档(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
②当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
③(面试,选择题,问答题就答上面)从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。
3.常见的回流和重绘操作任何对render tree中元素的操作都会引起回流或者重绘
①添加、删除元素(回流+重绘)
② 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
③ 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
④ 对style的操作(对不同的属性操作，影响不一样)
⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
④重绘与回流操作的注意点：重绘与回流操作的次数越多,计算机的性能消耗越大。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
