关键字：javascript js 控制页面元素 input button javascript生成按钮 禁用按钮 设置按钮样式 更改按钮函数
正文部分：
【功能】在使用javascript的过程中可能需要对页面元素中的按钮进行操作，以下的代码包括javascript创建按钮，并且设置按钮函数，javascript禁用按钮，javascript更改按钮样式操作。
【分析】
1、创建一个元素时，使用createElement()函数
2、设置元素属性可以有以下两种常用方式，首先获得具体元素的引用，
a)然后使用elementName.id="";设置她的id属性，同样可以设置name等属性，具体针对不同的页面元素有不同的属性，可以参考DHTML参考手册
b)使用setAttribute函数，elementName.setAttribute("id","elementId");
两种方式各有千秋，例如在设置class属性时就存在a)不好使用的情况，在使用中需要注意。
3、删除页面元素。删除时首先需要获得需要删除的元素的引用，然后使用removeChild函数就可以删除该元素了。必须要获得引用后才可以删除（注意）。
4、无论是创建或者删除页面元素，针对的对象是document.body。如果需要查看生成页面元素后的代码，需要使用document.body.innerHTML来查看，直接查看源文件是无法看见的。
5、设置disable属性也比较简单，只需要将其作为button对象的一个属性，设置为true就可以了。
|
function change_style(){
button=exist();
button.setAttribute("class","bt");//Mozilla设置class的方法
button.setAttribute("className","bt");//IE设置class的方法
/*下面的设置方法在Mozilla中有效，在IE中无效*/
//button.class="bt";
//button.className="bt";
}
|
6、设置class属性：
了解css的人都应该明白这个属性是用来做什么的，简单的说就是一个设置元素属性集合的方式，什么是样式属性集合呢，就是很多样式属性的集合；什么是样式属性呢，就是一个页面元素显示样式的属性，如使用什么样的字体，颜色是什么等等，建议使用这种方式设置样式属性。
IE和Mozilla是两种设置class的方式，在创建时支持className作为样式属性的关键字，后者支持class作为样式属性的关键字。所以这里为了兼容性，将这两个属性都设置了。
【全部源代码】
|
<HTML>
<head>
<title>JS生成以及控制button按钮</title>
<style text="text/css">
.bt{
border: 1px solid blue;
color:blue;
}
</style>
<script>
<!--
function create_button(){
if(exist())return;
var bt=document.createElement("input");
bt.type="button";
bt.id="bt";
bt.value="新的按钮:请点击";
bt.onclick=show;
document.body.appendChild(bt);
}
function change_func(){
button=exist();
button.onclick=show2;
button.value="按钮函数已经改变:请点击";
}
function disable_bt(){
button=exist();
button.disabled="true";
}
function change_style(){
button=exist();
button.setAttribute("class","bt");//Mozilla设置class的方法
button.setAttribute("className","bt");//IE设置class的方法
/*下面的设置方法在Mozilla中有效，在IE中无效*/
//button.class="bt";
//button.className="bt";
}
function change_style2(){
button=exist();
button.setAttribute("style","background: Aqua;color: red;");
button.style.cssText="background:Aqua;color:red;";
}
function exist(){
var bt=document.getElementById("bt");
if(null==bt){
return false;
}else{
return bt;
}
}
function remove_bt(){
var bt=document.getElementById("bt");
document.body.removeChild(bt);
}
function show(){
alert("点击了");
}
function show2(){
alert("这里是新的按钮调用函数");
}
function show_code(){
alert("这里是innerHTML的代码:"+document.body.innerHTML) ;
}
-->
</script>
</head>
<body>
<input type="button" value="生成按钮" onclick="create_button()" />
<input type="button" value="查看代码" onclick="show_code()" />
<input type="button" value="改变按钮函数" onclick="change_func()" />
<input type="button" value="删除按钮" onclick="remove_bt()" />
<input type="button" value="禁用按钮" onclick="disable_bt()" />
<input type="button" value="改变样式:设置class" onclick="change_style()" />
<input type="button" value="改变样式:直接设置style" onclick="change_style2()" />
<p></p>
</body>
</HTML>
|
