专业游戏门户,分享手游网游单机游戏百科知识攻略!

嗨游网
嗨游网

getelementbyid用法(Javascript使用document.getElementById)

来源:小嗨整编  作者:小嗨  发布时间:2023-02-21 04:41
摘要:getelementbyid用法(Javascript使用document.getElementById)。这个小分享就跟大家分享一下getElementById的用法,这个方法它是干什么用的呢,这个啊是最基本的js操作html标签最多也是...

getelementbyid用法(Javascript使用document.getElementById)。这个小分享就跟大家分享一下getElementById的用法,这个方法它是干什么用的呢,这个啊是最基本的js操作html标签最多也是最常用最基础的方法啦。我们实际运用中用它来获取html中的标签对象,从而达到动态的效果。

第一个我们先来test一下,用getElementById来获取下html文本框中的内容。

已知有如下html代码

<body>
 <input type="text" id="a"/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
  <input type="button" value="获取文本框中的值" onclick="f2()"/>
 </body>

现在我们就用js来获取下id="a"的文本框中的内容

<script type="text/javascript">

function f1()

{

//获取文本框中的值

var a = document.getElementById("a").value;

alert(a);

}

</script>

当我们在点击获取文本框中的值 这个按钮的时候我们就可以获取到a文本框中的内容,实现结果如下


getelementbyid用法(Javascript使用document.getElementById)


那么既然有获取那同样的就有设置,我们除了可以手动的自己输入内容到文本框中,相反我们依旧可以通过我们的getElementById来给文本框赋值,也就是用代码将内容显示在文本框中,且看下例

 <body>
 <input type="text" id="a" style="color:red;font-size:22px; height:25px;"/>
  <br/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
  <input type="button" value="给文本框赋值" onclick="f2()"/>
 </body>
<script type="text/javascript">
 function f1()
 {
  //获取文本框中的值
  var a = document.getElementById("a").value;
  alert(a);
 }
 function f2()
 {
  //给文本框赋值 点击给文本框赋值的按钮动态赋值
  document.getElementById("a").value="欢迎来到js世界";
 }

结果如下


getelementbyid用法(Javascript使用document.getElementById)



本案例完整代码

 <body>
 <input type="text" id="a" style="color:red;font-size:22px; height:25px;"/>
  <br/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
  <input type="button" value="给文本框赋值" onclick="f2()"/>
 </body>
 <script type="text/javascript">
 function f1()
 {
  //获取文本框中的值
  var a = document.getElementById("a").value;
  alert(a);
 }
 function f2()
 {
  //给文本框赋值
  document.getElementById("a").value="欢迎来到js世界";
 }
 </script>



本文地址:IT问答频道 https://www.eeeoo.cn/itwenda/903188.html,嗨游网一个专业手游免费下载攻略知识分享平台,本站部分内容来自网络分享,不对内容负责,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小嗨整编
相关文章相关阅读
  • javascript教程网(javascript教程推荐)

    javascript教程网(javascript教程推荐)

    javascript教程网(javascript教程推荐)JavaScript作为一种广泛应用于网页开发的技术,已经成为前端开发不可或缺的一部分。对于刚接触编程的菜鸟来说,选择一份合适的JavaScript教程至关重要。本文将为您推荐几款优...

  • 我的世界不死图腾获取方式(我的世界不死图腾用法)

    我的世界不死图腾获取方式(我的世界不死图腾用法)

    我的世界不死图腾获取方式(我的世界不死图腾用法)我的世界不死图腾由召唤师掉落,使用林中鬼屋藏宝图找到林中鬼屋,然后进入林中鬼屋的房间里击杀召唤师才能获得。不过不死图腾的掉落率比较低,需要击杀许多召唤师才能获得。我的世界不死图腾用法移除玩家身...

  • java软件叫什么(java软件安装教程详细)?

    java软件叫什么(java软件安装教程详细)?

    java软件叫什么(java软件安装教程详细)?Java语言是由美国Sun(StanfordUniversityNetwork)公司在1995年推出的,2009年Oracle甲骨文公司收购了Sun公司,如果想开发一个全新的Java程序,必须...

  • 我的世界java版官网(我的世界java版怎么下载)?

    我的世界java版官网(我的世界java版怎么下载)?

    我的世界java版官网(我的世界java版怎么下载)?我的世界java版早在2011年就已发布,而当时的中文补丁使许多人并未购买正版。而如今的网易版让许多人觉得没有童年的味道,那么如何下载java版呢?我的世界java版官网:minecra...

  • ones刻录软件的用法(ones刻录软件怎么刻录数据光盘)?

    ones刻录软件的用法(ones刻录软件怎么刻录数据光盘)?

    ones刻录软件的用法(ones刻录软件怎么刻录数据光盘)?ones刻录软件是一款专业的光盘刻录软件,不仅软件体积小巧、占用内存少,操作简单便捷,而且ones光盘刻录软件功能全面,用户可以通过软件刻录多种格式的文件,轻松上手操作,为用户带来...

  • 什么是构造函数?详解JavaScript中的构造函数

    什么是构造函数?详解JavaScript中的构造函数

    作为原型和原型链的基础,先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。本篇文章带大家详细了解一下javascript中的构造函数,介绍一下怎么利用构造函数创建一个js对象,希望对大家有所帮助!一个普通的函数被用...

  • 什么是Linux系统中nc命令?nc命令的用法详解

    什么是Linux系统中nc命令?nc命令的用法详解

    这篇文章主要介绍了linux系统中nc命令的基本用法,nc命令非常之强大,这里先简单介绍它用来作端口扫描以及文件传输等的基础使用。功能说明:功能强大的网络工具,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本。因为它短小...

  • Java 中的各种锁有哪些?

    Java 中的各种锁有哪些?

      Java中15种锁的介绍  在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下:  公平锁/非公平锁  可重入锁/不可重入锁  独享锁/共享锁  互斥锁/读写锁  乐观锁...

  • 周排行
  • 月排行
  • 年排行

精彩推荐