使用对象，面向对象创建div的方式

Posted 2021-03-21 wtdall

<script>

// //对象div的创建

// var div = document.createElement("div");

// document.body.appendChild(div);

// div.style.width = "200px";

// div.style.height = "200px";

// div.style.background = "blue";

// div.style.border = "1px solid black";

// div.style.bodyRadius = "10px";

 

// //将代码封装成方法

// function createDiv() {

// var div = document.createElement("div");

// document.body.appendChild(div);

// div.style.width = "200px";

// div.style.height = "200px";

// div.style.background = "blue";

// div.style.border = "1px solid black";

// div.style.bodyRadius = "10px";

// }

// createDiv();

// createDiv();

 

//面向过程1.创建元素，2.添加元素，3.设置元素样式

//面向对象1.对象，div对象，2.对象需要完成什么功能，方法:添加到body中appendTo，设置div对象的样式css

// function MyDiv(text){

// this.DOM = document.createElement(‘div‘);

// this.DOM.innerText = text;

// //添加方法

// this.appendTo = function(node){

// node.appendChild(this.DOM);

// }

// this.css = function(option){

// for(var key in option){

// this.DOM.style[key] = option[key];

// }

// }

// }

function MyDiv(text){

this.DOM = document.createElement(‘div‘);

this.DOM.innerText = text;

}

MyDiv.prototype.appendTo = function(node){

node.appendChild(this.DOM);

return this;

}

MyDiv.prototype.css = function(option){

for(var key in option){

this.DOM.style[key] = option[key];

}

return this;

}

//使用对象

// var div1 = new MyDiv("第一个");

// div1.appendTo(document.body);

// div1.css({

// width:"200px",

// height:"200px",

// background:"red",

// border:"1px solid black",

// })

var div = new MyDiv(‘这是我的div‘);

div.appendTo(document.body).css({

width:"200px",

height:"200px",

background:"red",

border:"1px solid black",

})

</script>

 

<script>

//匿名函数，闭包的概述，闭包的作用

//需求：计数，

//常规

// var count = 0;

// function addCount(){

// count++;

// console.log(count);

// }addCount(5);

// addCount(5);

// addCount(5);

// addCount(5);

//打破作用域链，在外部访问函数内部的局部变量：把局部变量保持在内存中：闭包的经典写法

function addCount() {

var count = 0;

return function () {

count++;

console.log(count);

}

}

var add = addCount();

add();

add();

add();

 

//js私有化属性

function person(){

var age = 18;

return{

getAge:function(){

return age;

},

setAge:function(value){

age=value;

}

}

}

var p = person();

console.log(p.age);

console.log(p.getAge());

console.log(20,‘私有化自定义属性‘);

</script>