每日技术总结：flex,选项卡,classList,

 

---

 

1.Flex布局子元素垂直居中

给父元素添加以下样式：

.parent {
    display: flex;
    align-items: center;
}

 

 

2.js面向对象的选项卡

见另一篇文章 js面向对象的选项卡

 

 

3.classList属性

参考 菜鸟教程 HTML DOM classList属性

实例如下：

// 为 <div> 元素添加 class
document.getElementById("myDIV").classList.add("mystyle");

// 为<div>元素添加多个类
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

// 为 <div> 元素移除一个类
document.getElementById("myDIV").classList.remove("mystyle");

// 为 <div> 元素移除多个类
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

// 为 <div> 元素切换类:
document.getElementById("myDIV").classList.toggle("newClassName");

// 获取<div> 元素的类名：
var x = document.getElementById("myDIV").classList;

// 查看 <div> 元素有多少个类名:
var x = document.getElementById("myDIV").classList.length;

// 获取 <div> 元素的第一个类名（索引为0）:
var x = document.getElementById("myDIV").classList.item(0);

// 查看元素是否存在 "mystyle" 类:
var x = document.getElementById("myDIV").classList.contains("mystyle");  // return true