码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript-如何元素id获取页面元素对象

时间:2020-04-30 15:53:21      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:技术   one   img   text   div   document   HERE   hid   输入框   


1. 通过元素id获取页面元素对象
var d = document.getElementById("id");
2. 获取和修改元素的文本内容
获取:d.innerText 修改: d.innerText="xxx";
3. 获取和修改文本框的内容
获取: i.value 修改: i.value="xxx";
4. 获取和修改元素的html内容

案例1:

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function myfn(){
        //得到文本框 和 div的元素对象
        var i = document.getElementById("i1");
        var d1 = document.getElementById("d1");
        var d2 = document.getElementById("d2");
        //获取和修改元素的文本内容
        d1.innerText=BBB;
        //把文本框的文本内容取出给到div
        d2.innerText = i.value;
    }
</script>
</head>
<body>
<input type="button" value="按钮" onclick="myfn()">
<input type="text" id="i1" value="AAA">
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
View Code

 案例2:

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function myfn(){
        //获取文本输入框和div的元素对象
        var i = document.getElementById("i1");
        var d = document.getElementById("d1");
        //判断用户输入的内容是否是数
        if(isNaN(i.value)){
            //如果不是数显示xxx
            d.innerText="输入错误,请重新输入!";
        }else{
            d.innerText = i.value*i.value;
        }
    }
</script>
</head>
<body>
请输入一个数:<input type="text" id="i1">
<input type="button" value="平方" onclick="myfn()">
<div id="d1"></div>
</body>
</html>
View Code

 

JavaScript-如何元素id获取页面元素对象

标签:技术   one   img   text   div   document   HERE   hid   输入框   

原文地址:https://www.cnblogs.com/xingsir/p/12808911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!