js动态创建按钮并控制按钮的形式
来源：互联网 发布：用java编写迷你计算器 编辑：程序博客网 时间：2024/06/10 15:09
<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>
<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>
0 0
- js动态创建按钮并控制按钮的形式
- js动态创建按钮
- JS中动态分创建按钮并绑定代码
- 懒加载的形式创建一个按钮
- 如何动态创建按钮，并响应消息
- 动态创建CMFCToolbar并添加按钮
- 【MFC动态创建按钮，并在按钮上实现位图的切换显示】
- js动态添加input按钮并给按钮增加onclick的函数事件带参数
- js动态添加input按钮并给按钮增加onclick的函数事件(带参数)
- js动态创建多个按钮
- js动态创建按钮 (未测试)
- 用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格
- js控制按钮倒计时
- 动态创建按钮
- SDK动态创建按钮
- 动态创建一个按钮
- VC 动态创建按钮
- VC 动态创建按钮
- Swift 按钮(UIButton)
- 如何自学Android编程?
- kubernetes与calico整合
- #学习笔记#(30)牛客网JS测试题21~45
- 树状数组 模板
- js动态创建按钮并控制按钮的形式
- 怎样拷贝8G的iso文件到U盘中
- 十进制转十六进制
- ios关于各种手势，挺有意思的
- ObjectAnimator
- Android编译系统详解(一)——build/envsetup.sh
- java连接各种数据库的配置文件写法
- 游戏中的有限状态机
- 关于重新实现TextView 的超链接点击事件
