JavaScript(二)

屬性、樣式操做

改變元素樣式的方式：外部樣式表、內部樣式表、行內樣式。

獲取元素的顯示樣式

獲取節點的方式:

經過id獲取：document.getElementById()

經過選擇器來獲取：document.querySelector(),document.querySelectorAll()

經過class名字獲取：document.getElementsByClassName()

經過標籤名獲取：document.getElementsByTagName()

經過name獲取：document.getElementsByName()

用classList來操做類名

添加類名: .classList.add()  

移除類名: .classList.remove()

切換類名（有則移除，沒有則添加): .classList.toggle()

let oWrap = document.getElementById("wrap");

    //不標準的寫法
    // oWrap.style = "width: 300px";

    //style 這個合法的標籤屬性很特殊
    console.log( oWrap.style );

    oWrap.style.width = "300px";
    oWrap.style.height = "200px";
    oWrap.style.backgroundColor = "red";


//樣式操做
let oWrap = document.getElementById("wrap");

    oWrap.onclick = function(){
      // oWrap.style.width = "500px";

      //在事件函數裏面，能夠用 this來代替oWrap
      this.style.width = "500px";
    };
//變相操做樣式
let oWrap = document.getElementById("wrap");

    oWrap.onclick = function(){
      //添加名字,點擊時,更換名字生成樣式
      this.className = "fly";
    };