首先先說下編輯器Hbuilder快捷鍵

div.abc tab: <div class="abc"></div>

div#abc tab: <div id="abc"></div>

我們每次獲取一個元素都要寫相同的很長的一段程式碼，為了減少工作量可以把這個操作賦值給一個變數完成，

var box=document.getElementById('box');

//JS中的函式是以被賦值的形式出現的，並且它是被事件呼叫，兩個條件都要滿足
//事件: window.onload

window.onload=function(){
    alert();
}
 

//JS建立物件
var user={
    name:"ROBIN.FANG",
    address:{province:"江蘇",city:"鹽城"},
    birthdate:"1999-1-1",
    getInfo:function(){console.log(this.name);}
    getInfo:function(){return "姓名:"+this.name+",住址:"+this.address.province+this.address.city}

}

//物件是函式時前面要加上 getInfo

//函式示例
//假如html頁面中有兩個按鈕和1個div元素
window.onload=function(){
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    var box=document.getElementById("box");
}

btn1.onclick=function(){
    setstyle();
};

btn2.onclick=function(){
    setstyle();
};

function setstyle(){
    box.style.width='200px';
    box.style.height='200px';
    box.style.margin='10px';
    box.style.padding='20px';
    box.style.background='green';
}
 

//屬性操作
var btn=document.getElementById('btn');
btn.onclick=function(){
    alert(btn.type);
    //console.log(btn.id);
    //console.log(btn.value);
    btn.value="按鈕";
    //console.log(btn.style['font-size']);
}