<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.current{
background-color: greenyellow;
}
</style>
</head>
<body>
<script>
var element = {
/*追加dom元素到node节点中*/
appendTo: function (node) {
/*判断是否是dom元素*/
if(node.nodeType){
/*如果是使用node元素追加*/
node.appendChild(this.Dom);
}else if(node.Dom){
/*如果传入的DivTag对象 使用node.Dom*/
node.Dom.appendChild(this.Dom);
}
return this;
},
add: function (node) {
/*判断是否是dom元素*/
if(node.nodeType){
/*如果是使用node元素追加*/
this.Dom.appendChild(node);
}else if(node.Dom){
/*如果传入的DivTag对象 使用node.Dom*/
this.Dom.appendChild(node.Dom)
}
return this;
},
css: function (option) {
/*判断option是否存在是否为对象*/
if(!option || typeof option != 'object') return false;
for(var key in option){
/*设置样式*/
this.Dom.style[key] = option[key];
}
return this;
},
html: function (str) {
/*判断str是否为字符串*/
if(typeof str != 'string') return false;
/*添加文本*/
this.Dom.innerHTML = str;
return this;
},
attr: function (name,value) {
/*判断value是否存在*/
if(value){
/*如果存在设置属性*/
this.Dom.setAttribute(name,value);
}else{
/*如果不存在获取属性*/
return this.Dom.getAttribute(name);
}
return this;
}
}
/*创建标签函数*/
var createElement = function (tagName) {
this.Dom = document.createElement(tagName);
}
/*设置原型对象*/
createElement.prototype = element;
/*创建对象链式调用方法*/
new createElement('div').appendTo(document.body).html('我是标签').css({
color:'red'
}).attr('class','current');
</script>
</body>
</html>
