三位一体的网页
游览器由结构层，表现层，行为层组成
结构层
- 网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。
表现层
- 表示层（presentation layer）由CSS负责完成。CSS描述页面内容应该如何呈现。
行为层
- 行为层（behavior layer）负责内容应该如何响应事件这一问题。这是JavaScript语言和DOM主宰的领域。
分离
- 在所有的设计工作中要保障，HTML去搭建文档的结构；使用CSS去设置文档的呈现效果；使用DOM脚本去实现文档的行为。
- 单这三项技术由互相影响。例如在js中去创建和销毁html，css中去通过伪类实现js的效果，js也同样可以改变css
style属性
- 文档里的每个元素都是一个对象，每个元素都有一个style属性（存放这dom元素的所有样式属性）
const box=document.getElementById("box");
console.log(typeof box.style); // object
console.log(box.style); // 返回一个CSSStyleDeclaration对象里面包含了元素所有样式
获取样式
- 获取元素如果是多个单词组合而成用小驼峰命名获取
- 注意style属性只能获取和设置到内联style上
console.log(box.style.backgroundColor);
console.log(box.style.color);
设置样式
- style对象的各个属性就都是可读写的
- style对象的属性的值必须放在引号里，单引号或双引号均可：
- style属性设置的样式将会直接作用到元素的内联style上
box.style.color="red"
box.style.font = "bold 30px italic"
何时该用DOM脚本设置样式
- 你不应该利用DOM去创建重要的内容那样，你也不应该利用DOM为文档设置重要的样式。
根据元素在节点树里的位置来设置样式
- css可以通过各种选择器为元素添加样式但是CSS还无法根据元素之间的相对位置关系找出某个特定的元素，但这对DOM来说却不是什么难题
function set_style(){
let box=document.getElementsByTagName("h1");
box=Array.from(box);
box.forEach((item)=>{
item.nextElementSibling.style.color="red"
})
}
根据某种条件反复设置某种样式
- 如果游览器支持css3可以直接使用选择器为奇数行和偶数行设置样式，如果游览器不支持js就是不错的选择
function set_style(){
let li=document.getElementsByTagName("li");
li=Array.from(li);
li.forEach((item,index)=>{
if(index%2==0){
item.style.backgroundColor='red'
}else{
item.style.backgroundColor='blue'
}
})
}
根据特定的事件设置样式
- 在有些事件处理上，css就表现的无能无力这时js便可以提供很好的解决方法例如点击事件
// htm部分
<button id="btn" onclick="set_style()">点我变色</button>
<h3 id="text">哈哈</h3>
// js部分
let color=false
function set_style(){
const text=document.getElementById("text");
color=!color
if(color){
text.style.color='red'
}else{
text.style.color=''
}
}
最后
在纠结是使用css添加某些样式时和用js添加时一定要考虑下面俩个因素
- 这个问题最简单的解决方案是什么；
- 哪种解决方案会得到更多浏览器的支持。
className属性
- style代码是用js去添加和修改style，className是使用js去更新这个元素的class属性。
- className是一个可读写的属性(注意className设置的class是替换不是追加)
- className这确保了网页的表示层和行为层分离得更加彻底。
利用className实现斑马线
function set_style() {
let li = document.getElementsByTagName("li");
li = Array.from(li);
li.forEach((item, index) => {
item.className='f30'
if (index % 2 == 0) {
// 注意这里要加空格，是为了追加class
item.className+=' red'
} else {
item.className='blue'
}
})
}
