a.js
====
function Button(a,b){
var inputTag=document.createElement("input");
inputTag.type="button";
inputTag.id=a;
inputTag.className=b;
this.owner=inputTag;
this.appendTo=function(container){
container.appendChild(inputTag);
}
this.addActionListener=function(callbackFunc){
inputTag.onclick=callbackFunc;
}
}
a.html
======
<html>
<head>
<style type="text/css">
.addStyle { background:orange; }
.removeStyle { background:skyblue; }
</style>
<script src="a.js"></script>
<script>
window.onload=function(){
initButton();
}
function initButton(){
var b1=new Button("addButton","addStyle");
var b2=new Button("removeButton","removeStyle");
b1.appendTo(buttonContainer);
b2.appendTo(buttonContainer);
b1.addActionListener(f1);
Button.prototype.setColor=function(cn){
this.owner.style.background=cn;
}
b1.setColor("red");
}
function f1(){
alert(111);
}
</script>
</head>
<body>
<div id="buttonContainer">
</div>
</body>
</html>
'개발하자 > 자바스크립트' 카테고리의 다른 글
| 배열의 값들을 원하는 순서대로 출력하기 (0) | 2015.03.03 |
|---|---|
| 배열의 키를 이용해서 값 뽑아내기 (0) | 2015.03.03 |
| 객체생성해서 appendChild하기 (0) | 2015.03.03 |
| 객체생성이용,외부js파일이용,클릭이벤트 등록하기 (0) | 2015.03.03 |
| 객체생성 이용해서 버튼만들어서 css적용하기 (0) | 2015.03.03 |