模拟jq的设置样式

Posted 2020-08-27 改变

//需求，创建一个div，添加到页面上，给div添加属性
//面向对象开发，构造函数创建类
function divTag(){
this.div1=document.createElement(‘div‘);
this.appendTo=function(node){
node.appendChild(this.div1);
return this;//将构造函数的new的新对象返回，因为它里面有这两个方法，所以才能链式操作
}
this.css=function(obj){
for(var k in obj){
this.div1.style[k]=obj[k];
};
return this;//将构造函数的new的新对象返回，因为它里面有这两个方法，所以才能链式操作
};
}

//实例化
var div =new divTag();
div.css({
‘border‘:‘1px dotted red‘,
‘width‘:‘100px‘,
‘height‘:‘200px‘
}).appendTo(document.body);