第9章 CSS-DOM

三位一体的网页

游览器由结构层，表现层，行为层组成

结构层

• 网页的结构层（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部分
点我变色
哈哈

// 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添加时一定要考虑下面俩个因素

1. 这个问题最简单的解决方案是什么；
2. 哪种解决方案会得到更多浏览器的支持。

---

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'
        }
    })
}