这个小分享道哥就跟大家分享一下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来给文本框赋值，也就是用代码将内容显示在文本框中，且看下例
<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世界"; }
结果如下
本案例完整代码
<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>
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！