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


相关推荐

  • 将python打包成exe_python程序打包成安装包

    将python打包成exe_python程序打包成安装包Python Windows下打包成exe文件

    2022年4月21日
    51
  • QQ农场怎么开挂_qq农场矿山辅助

    QQ农场怎么开挂_qq农场矿山辅助很久没更新博客了,今天就拿开发QQ开心农场外挂的一些问题来写篇短日志充个数。 关于登陆       在web上,QQ登陆的时候是将密码加密后再提交了,打开http://xiaoyou.qq.com,找到了密码加密过程在http://imgcache.qq.com/campus/js/Mlogin.js 文件中,通过解读代码可以了解到,QQ一共进行了4次的MD5运算,具体过程如下:比如

    2022年9月12日
    0
  • 树莓派的产品定位,以及探讨与ARM开发板的区别

    树莓派的产品定位,以及探讨与ARM开发板的区别目录一、树莓派的几点认识二、树莓派的定位,与ARM开发板有不同的目标用户三、树莓派与嵌入式开发的区别1、树莓派能不能做为嵌入式的ARM开发板?2、树莓派能不能进行嵌入式开发与学习?四、树莓派上的实践一、树莓派的几点认识1、树莓派是一款基于Linux系统的单板机电脑。它由英国的树莓派基金会所开发,目的是以低价硬件及自由软件刺激在学校的基本的计算机科学教育。树莓…

    2022年6月9日
    27
  • 一文读懂Spring 循环依赖,写得太好了!(建议收藏)

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 转自:Vt 链接:juejin.im/post/5e927e27f265da47c8012ed9 前言 Spring…

    2021年6月23日
    88
  • quartz定时任务不执行(任务统筹策略)

    由于某种原因,例如应用停掉,导致定时任务错过了本该执行的时间点,这就是定时任务过期。对于过期的定时任务,我们需要基于某种策略对其进行处理。过期策略在Trigger接口中定义了两种过期策略,publicstaticfinalintMISFIRE_INSTRUCTION_SMART_POLICY=0;publicstaticfinalintMISF…

    2022年4月11日
    1.5K
  • Android ViewPager使用详解

    Android ViewPager使用详解这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等。那如何使用它呢,与LisstView类似,我们也需要一个适配器,他就是PagerAdapter。看一下api的图片, ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样。分三个步

    2022年5月23日
    30

发表回复

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

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