javascript按钮button简单操作大全

时间:2017-03-21
本文章向大家介绍javascript按钮button操作大全，包括显示/隐藏按钮、禁用/启用按钮、按钮焦点事件、动态创建按钮、获取按钮属性等等，需要的朋友可以参考一下。

1.模拟Button的点击事件

<html>
    <script language="JavaScript">
    function clickFirstButton()
    {
      document.myForm.button1.click();
    }
    </script>
    <form name="myForm">
      <input type="button"
             value="Display alert box"
             name="button1"
             onClick="console.log('You clicked the first button.')"><br>
      <input type="button"
             value="Call on button 1"
             name="button2"
             onClick="clickFirstButton()">
    </form>    
</html>

2.为button按钮添加焦点

<html>
    <head>
        <script language="JavaScript">
    function removeFocus()
    {
      document.myForm.button2.blur();
    }
    </script>
    </head>
    <body>
    <form name="myForm">
      <input type="button"
             value="I hold my focus after a click"
             name="button1"><br>
      <input type="button"
             value="I can not hold my focus after a click"
             name="button2"
             onClick="removeFocus()">
    </form>
    </body>
</html>

3.更改button按钮的文本值

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='/js/lib/mootools-core-1.4.5-nocompat.js'></script>
<style type='text/css'>
button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}
</style>

</head>
<body>
  <button>
    <span>3 replies</span>
  </button>
</body>
</html>

4.buuton按钮的onMouseUp事件实例

<html>
    <form name="myForm">
      <input type="button"
             value="Big Button"
             name="myButton"
             onMouseUp="console.log('MouseUp event occured')">
    </form>
</html>

5.获得Button NAME属性 

<html>
    <form name="myForm">
      <input type="button"
             value="Press here to see the name of this button"
             name="myBigButton"
             onClick="displayButtonName()">
      <input type="text"
             name="textBox">
    </form>
    <script language="JavaScript">
    function displayButtonName()<
    {
      document.myForm.textBox.value=document.myForm.myBigButton.name;
    }
    </script>
</html>

6.禁用和启用button按钮

<html>
<body>
<script>
    function function1() {
        document.all.myButton.disabled = true;
    }
    function function2() {
        document.all.myButton.disabled = false;
    }
</script>
<input id="myButton" type="button" value="Disable" onClick="function1();">
<input type="button" value="Enable" onClick="function2();">
</body>
</html>

7.获取buuton所在的form表单

<html>
<body>
    <form name="myForm">
      <input type="button"
             value="Big Button"
             name="myButton">
    </form>
    <script language="JavaScript">
    if(document.myForm.myButton.form == document.myForm)
      console.log("myButton's form property is equal to myForm object");     
    else
      console.log("myButton's form property is NOT equal to myForm object"); 
    </script>
</body>
</html>
随机文章
Javascript知识点必读
最近更新