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


相关推荐

  • 16位汇编指令_汇编语言指令表

    16位汇编指令_汇编语言指令表汇编语言特点:与机器相关,执行效率高,调试复杂汇编语言优缺点:汇编语言和高级语言混合编写,互补数据表示类型:二进制B,八进制Q,十进制D,十六进制HBCD编码:用二进制来表示十进制数CPU资源和存储器:通用寄存器,标志寄存器,指令寄存器EAX,累加ECX,循环计数EDX,数据寄存器EBX,基址寄存器ESP,栈顶EBP,栈底ESI,扩展源指针EDI,扩

    2022年10月21日
  • HTML详细笔记

    HTML详细笔记

    2021年10月7日
  • mysql截取字符串最后两位_java 字符串截取 – 最后带上mysql字符串截取比较[通俗易懂]

    mysql截取字符串最后两位_java 字符串截取 – 最后带上mysql字符串截取比较[通俗易懂]Java中的substring()方法有两个方法的重载,一个带一个参数的,一个带两个参数的。第一种写法:substring(n);//从索引是n的字符开始截取,条件(n>=0,n第二种写法:substring(n,m);//从n开始,截取m-n个字符,条件(n通俗点:str.substring(intbegin,intend);从字符串开始位置(开始位置即为下标,下标是从0开始)截…

    2022年10月2日
  • linux解压zip多种命令,Linux常用几种打包、压缩、解压命令,(备用)

    linux解压zip多种命令,Linux常用几种打包、压缩、解压命令,(备用)01-.tar格式解包:[*******]$tarxvfFileName.tar打包:[*******]$tarcvfFileName.tarDirName(注:tar是打包,不是压缩!)02-.gz格式解压1:[*******]$gunzipFileName.gz解压2:[*******]$gzip-dFileName.gz压缩:[*******]$gzipFile…

    2022年6月1日
  • [译]MDX 介绍

    [译]MDX 介绍关于MDXMDX(MultiDimensionaleXpressionlanguage)是非常强大的工具,可以将你的多维数据库/cube发挥到极致.本文会覆盖MDX基础,并且希望能使你对

    2022年8月1日
  • 关于代价函数的理解「建议收藏」

    关于代价函数的理解「建议收藏」假设拟合直线为,代价函数(costfunction)记为则代价函数:为什么代价函数是这个呢?首先思考:什么是代价?简单理解代价就是预测值和实际值之间的差距,那对于多个样本来说,就是差距之和。如果我们直接使用,这个公式看起来就是表示假设值和实际值只差,再将每一个样本的这个差值加起来不就是代价了吗,但是想一下,如果使用这个公式,那么就单个样本而言,代价有正有负,全部样本的代价加起来有可能正负

    2022年6月7日

发表回复

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

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