JS 函数和对象创建

版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/85259878

首先先说下编辑器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']);
}