目錄
添加/刪除類名 classList.add() & classList.remove()
HTML
data-set
data-set是HTML5的一個新特性，其作爲元素的attribute用於存放獲取數據
語法：
set ：
<div id="my-div" data-yourname="value">
get ：
CSS : （常用於給僞元素:before :after 的 content 賦值）
#my-div:after{
attr(data-yourname)
}
JavaScript :
var value=document.getElementById("my-div").dataset.yourname
CSS
flex佈局
flex的出現一定程度上解決了自適應佈局和垂直居中的難題。
語法：
定義在父元素上的屬性（用於規定子元素的排列方式）
#flex-parent{
/*使用flex佈局*/
display:flex/*行內元素使用inline-flex*/;
/*設置主軸方向（子元素排列方向）*/
flex-direction:row/*水平方向從左到右（默認）*/
row-reverse /*水平方向從右到左*/
column /*垂直方向由上到下*/
column-reverse /*垂直方向由下到上*/;
/*換行行爲*/
flex-wrap:nowrap/*不換行*/ wrap /*換行*/ wrap-reverse /*下一行出現在上邊*/;
/*簡寫*/
flex-flow:<flex-direction><flex-wrap>;
/*主軸的對齊方式*/
justify-content:flex-start /*左對齊（默認）*/
flex-end /*右對齊*/
center /*居中*/
space-between /*兩端對齊，子元素之間間隔相等*/
space-around /*子元素兩側間隔相等，子元素之間間隔比子元素與邊框間隔大一倍*/;
/*垂直軸的對齊方式*/
align-items:stretch/*如果子元素未設置高度或高度auto，則充滿整個父元素高度*/
flex-start || flex-end || center /*與justify-content類似*/
baseline /*子元素第一行的文字的基線對齊*/;
/*存在多軸線時的對齊方式*/
align-content:flex-start || flex-end || center || space-between || space-around ||
stretch/*(默認)*/;
定義在子元素上的屬性（定義某些特例的排列方式）
#div-child{
/*子元素的排列順序*/
order:<order-number>/*數值越小越靠前，默認0，允許負值*/;
/*子元素的放大比例（如果有多餘空間）*/
flex-grow:<grow-number>/*默認0，都爲1的時候所有子元素等分剩餘空間，若有一個爲2，則該元素多佔一倍空間*/;
/*子元素縮小比例（如果空間不足）*/
flex-shrink:<shrink-number>/*默認1，即空間不足會縮小，爲0則不縮小，不接受負值*/;
/*子元素佔據的主軸空間（分配多餘空間前）*/
flex-basis:<length> || auto/*默認auto，即子元素本來大小，若設置爲子元素的width和height的值，則該元素佔據固定空間*/;
/*簡寫*/
flex:<flex-grow><flex-shrink><flex-basis>/*後兩個屬性可不寫，默認 0 1 auto*/;
/*子元素的對齊方式（定義在子元素的align-items）*/
align-self:auto || flex-start || flex-end || center || baseline || stretch;
}
:before & :after僞元素
在CSS3的語法中，爲了將 僞元素 與 僞類 區分開將其寫做 ::before 和 ::after
語法：
#selector :before{
content:''/*僞元素的內容*/
/*------樣式-------*/
}
僞元素用於在當前元素之前/後創建一個元素，其值爲content的值，由於其在HTML結構中未定義，所以叫做僞元素
line-height
line-height爲行高，定義爲兩行文本基線（baseline）之間的距離
baseline
字母x的底端的水平線
transform：rotate（ndeg）
使元素旋轉n度
rotateX（ndeg）
以x軸3d旋轉
rotateY（ndeg）
以y軸3d旋轉
transform-origin:x y z
旋轉的原點 top bottom center left right px %
Tips:使用JavaScript無法獲得旋轉的角度，獲得是matrix的矩陣值
backface-visibility
元素背面不可見
animation
#animation-div{
animation:animation-name <duration>;
}
@keyframes animation-name{
from{/*----CSS----*/}
to{/*----CSS----*/}
}
@keyframes animation-name{
0%{/*----CSS----*/}
/*其他百分比階段的狀態*/
100%{/*----CSS----*/}
}
JavaScript
function作爲構造函數的使用
語法：
function Constructor(param){
this.property=param/*定義屬性*/
/*------*/
}
var object=new Constructor
/*對象的方法定義在原型上，以便所有通過該構造函數創建的對象共享該方法*/
object.prototype.methodsName=function(){/*------*/}
Date()方法 獲取日期、月份、年份、時間
var now=new Date()/*獲取當前日期和時間*/
/*將日期和時間轉換爲字符串*/
now.toString()//April 27 HH:mm:ss timezone
now.toLocaleString()//2020/4/27 H:mm:ss
now.toDateString()//April 27
now.toLocaleDateString()//2020/4/27
now.toTimeString()//HH:mm:ss timezone
now.toLocaleTimeString()//H:mm:ss
/*獲取當前日期*/
var date=now.getDate()//今天的日期
var week=now.getDay()//今天的星期
var month=now.getMonth()//當前月份
var year=now.getFullYear()//當前的四位年份
var hour=now.getHour()//獲取小時
var minute=now.getMinutes()//獲取分（方法名有s）
var second=now.getSeconds()//獲取秒（方法名有s）
var ms=now.getMillionseconds()//獲取毫秒（seconds首字母不大寫）
添加/刪除類名 classList.add() & classList.remove()
該方法常用於爲指定元素在某個時機添加類名以開始動畫，在某個時機移除類名以停止動畫
語法：
//添加類名
document.getElementById("selector").classList.add("className")
//刪除類名
document.getElementById("selector").classList.remove("className")