getElementById的用法

getElementById的用法    getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。    返回具有指定ID属性值的第一个对象的一个引用。    语法:    Element=document.getElementByIdx_x_x(“id”)    …

大家好,又见面了,我是你们的朋友全栈君。

        getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。

       返回具有指定ID属性值的第一个对象的一个引用。

       语法:

       Element = document.getElementByIdx_x_x(“id”)

       获得ID值=id的所有属性和方法

       JS中经常使用它通过控件ID取得元素的值,如一个form里包含text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。

 

    实例1:

<html>
  <head>
  </head>
  <body>
    <input id="inTag" name="inName" value="bijian" type="text" />
    <input type="submit" value="获取值" onClick="getValue()"/>
  </body>
  <script language="javascript">
     window.onload = function run(){   
         var inTag = document.getElementByIdx_x("inTag"); 
                  inTag.value = "hello!";
     }
    
     function getValue() {
              var inTag = document.getElementByIdx_x("inTag");
              alert(inTag.value);
     }
  </script>
</html>

 

    实例2:

<html>
  <head>
      <title>getElementById</title>
  </head>
  <body>
    <a id="mr" href="http://www.baidu.com/">百度</a>
    <form name="myform">
        <input type="button" value="更换连接" onClick="change()"/>
    </form>
  </body>
  <script language="javascript">
     function change() {
             document.getElementByIdx_x("mr").innerHTML = "金山123";
             document.getElementByIdx_x("mr").href="http://123.duba.net/";
     }
  </script>
</html>

   

    实例3:

<html>
  <head>
      <title>getElementById</title>
  </head>
  <body>
    <h1 id="divTest" οnmοusemοve="s()" οnmοuseοut="reset()" align="center">这是一个有感觉的标记</h1>
  </body>
  <script language="javascript">
     function reset() {
             var divTest = document.getElementByIdx_x("divTest");
             divTest.innerHTML = "这是一个有感觉的标记";
     }
     function s()  {
             var divTest = document.getElementByIdx_x("divTest");
             divTest.innerHTML = "老鼠来了";
     }
  </script>
</html>

   

    实例4:

<html>
  <head>
      <title>getElementById4</title>
  </head>
  <body>
    <font ID=main_title size=6><b>虚拟网络世界</b></font>
  </body>
  <script language="javascript">
     var n = 0;
     function changefontcolor() {
             n=n%4;
             switch(n) {
                 case 0:
                         main_title.color="red";
                         break;
                 case 1:
                         main_title.color="green";
                         break;
                 case 2:
                         main_title.color="blue";
                         break;
                 case 3:
                         main_title.color="yellow";
             }
             n++;
     }
     //定时执行函数每秒钟调用changefontcolor()函数一次,改变大标题的颜色
     setInterval("changefontcolor()",1000);
  </script>
</html>

   

    实例5:

<html>
  <head>
      <title>getElementById5</title>
  </head>
  <body onKeypress="showCapture()">
    <h1 ID="num" align="center">0000</h1>
  </body>
  <script language="javascript">
       var r;
       function showNextNum() {
               var m_num=Math.floor(Math.random()*(3000-1000))+1000;
               num.innerHTML = m_num;
       }
       function showCapture() {
               clearTimeout(r);
       }
     r = setInterval("showNextNum()",100);
  </script>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159586.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm中安装opencv_pycharm安装opencv库出错

    pycharm中安装opencv_pycharm安装opencv库出错Pycharm安装opencv的几种方法之前在默认环境中用pip安装过一次opencv,当时就是参考比人方法弄,稀里糊涂的,然后今天想在自己别的环境下(tensorflow)下安装终于弄懂了一些,暂时发现了几种安装的方法,特此记录下。方法1:在Pycharm自带的库中下载(暂且这么叫吧,如下图)这个方法我也是看别人说的,自己还没试过,描述也没介绍版本啥的,所以个人也不推荐…方法2:就是…

    2022年8月29日
    3
  • 计算机错误代码0X000000be,电脑蓝屏0x000000be怎么解决

    计算机错误代码0X000000be,电脑蓝屏0x000000be怎么解决相信遇到过蓝屏的用户都知道,当蓝屏出现时,Windows操作系统的蓝屏死机提示已经成为标志性的画面,是令使用者颇为烦恼的电脑故障。用户遇到电脑蓝屏代码0x000000BE时何解?下面,小编就来跟大家介绍一下电脑蓝屏出现代码0x000000BE的解决方法。电脑蓝屏0x000000be怎么解决1、首先我们要知道0x000000BE错误表示硬件设备的驱动程序试图向只读内存错误地写入数据。这个错误一般是因…

    2022年10月8日
    7
  • ubuntu安装qt4.8.7_ubuntu18.04安装教程

    ubuntu安装qt4.8.7_ubuntu18.04安装教程文章目录更新源安装qt更新源最好用清华的源,比较快$sudoapt-getupdate安装qt$sudoapt-getinstallqt*

    2022年10月15日
    4
  • chip seq实验原理及步骤_思科真机实验环境搭建

    chip seq实验原理及步骤_思科真机实验环境搭建实验内容通过实验环境学习了解SR-PCE。xrv_7作为PCE,计算PE1到PE2的路径。网络中IP设置,metric值与之前的实验一致。拓扑图配置流程:配置SRGB在IGP(is-is)中使能segmentrouting和NodeID修改IGP和TE的链路metric配置PCE我们这次主要关注配置PCE的过程。前面的配置可以参考:SR-TEPolicy(思科)—-explicitpath实验SR-TEPolicy(思科)—-dynamicpath实验P

    2025年9月29日
    2
  • 2022pycharm 激活码(JetBrains全家桶)

    (2022pycharm 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~40ZKSWCX8G-eyJsaWNlb…

    2022年4月2日
    200
  • 测试后台管理系统思路和方法

    测试后台管理系统思路和方法每个公司不管做什么业务,开发网站,app或者公众号亦或小程序,但凡涉及到用户信息或者订单信息都有对应的后台管理系统,所以每个测试人员基本上都有测试过后台管理系统的经验,但是后台管理系统测试不仅仅是基本的增删改查测试,还需要进行业务逻辑测试,还有兼容性测试,接口测试和压力测试。下面是我总结的测试思路和方法,可能有很多不足之处,希望多多评论补充第一步,分析需求文档和原型图,原型图最好看有交互效果的…

    2022年5月11日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号