sponsored links

javascript 控制页面元素之-button按钮

关键字: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>

 
Tags:
  • javascript 控制 html元素 显示/隐藏
    1.编写js函数 < script type="text/javascript">function display(id){ vartraget=document.getElementById(id);if(traget.style.display=="none"){traget.style.display ...
  • javascript控制html元素显示/隐藏实现代码
    javascript 控制 html元素 显示/隐藏,下面是一些逐步的实现原理.1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?" ...
  • 如何在页面中使用Acegi权限集合和taglib控制页面元素
    如何在页面中使用Acegi权限集合和taglib控制页面元素   王保政 Email:baozhengw@netease.com   JSP页面中的页面元素,URL,按钮是否可见或变灰都可通过Acegi标签库来实现,使用Acegi标签库,可设置不同的权限ID允许点击的按钮,访问的URL,或隐藏无权限的功能菜单. 如何配置和使用标签库? 打开acegi-sec ...
  • javascript控制页面控件隐藏显示
    javascript控制页面控件隐藏显示
    javascript控制页面控件隐藏显示的两种方法 <script language="javascript">/**//*  方法一:   隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static */document.all["PanelSMS"].style.v ...
  • JavaScript控制页面控件的隐藏与显示
    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility=& ...