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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 信用标准评分卡模型开发及实现方案_信用评分卡模型的建立

    信用标准评分卡模型开发及实现方案_信用评分卡模型的建立一、信用风险评级模型的类型信用风险计量体系包括主体评级模型和债项评级两部分。主体评级和债项评级均有一系列评级模型组成,其中主体评级模型可用“四张卡”来表示,分别是A卡、B卡、C卡和F卡;债项评级模型通常按照主体的融资用途,分为企业融资模型、现金流融资模型和项目融资模型等。A卡,又称为申请者评级模型,主要应用于相关融资类业务中新用户的主体评级,适用于个人和机构融资主体。B卡,又称为行为评级模型

    2022年10月22日
    0
  • CPLD和FPGA的区别(转)[通俗易懂]

    CPLD和FPGA的区别(转)[通俗易懂]原文:http://tvb2058.spaces.eepw.com.cn/articles/article/item/15358本文重点从CPLD的结构来讲的,从而说明其与FPGA的区别——————————————————————————————————-…

    2022年5月29日
    41
  • 盛希泰:中国正经历第4次经济大重启 90后是大变量

    盛希泰:中国正经历第4次经济大重启 90后是大变量

    2021年9月14日
    55
  • linux 挖矿效率_以太坊(ETH)怎么挖矿?LinuxETH系统挖矿教程「建议收藏」

    linux 挖矿效率_以太坊(ETH)怎么挖矿?LinuxETH系统挖矿教程「建议收藏」Geth客户端的CPU挖矿效率非常低,纯属鸡肋。如对CPU挖矿感兴趣,请参照本文。下面介绍GPU挖矿。硬件GPU挖矿需要1-2GB显存(译者注:1GB显存不可以),显存不够会一直报错。GPU矿机是基于OpenCL的,所以AMD显卡比NVIDI显卡更有效率。ASIC和FPGA(即专业矿机)是无效的。根据自己的显卡类型和系统,选择openCL:AMDSDKopenCLNVIDIACUDAope…

    2022年10月15日
    0
  • pycharm配置opencv环境_pycharm opencv安装

    pycharm配置opencv环境_pycharm opencv安装1.cmdpipinstallopencv-python-ihttps://pypi.tuna.tsinghua.edu.cn/simple后续可能会报pip版本低按指示升级记得-ixxxx(同上)装完后可以在cmdpythonimportcv2试试能往下走就OK2.新建Python工程不要默认“虚拟机”那个cmdpythonimportsysprint(sys.path)找到相应的.exe…

    2022年10月28日
    0
  • java 设置环境变量

    java 设置环境变量安装JDK向导进行相关参数设置。如图:正在安装程序的相关功能,如图:选择安装的路径,可以自定义,也可以默认路径。如图:成功安装之后,进行测试是否真的成功安装,点击【开始】—-【运行】—-输入CMD,在命令提示符里面输入“Java-version”并按回车键,出现下图,即为安装成功。如图:下面开始配置环境变量,右击【我的电脑】

    2022年5月11日
    38

发表回复

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

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