button,input,html与value,innerText,innerHTML的对应关系

最新推荐文章于 2023-11-08 15:10:50 发布

敲代码的余文乐

最新推荐文章于 2023-11-08 15:10:50 发布

阅读量705

点赞数 1

分类专栏： HTML 文章标签： html

原文链接：https://www.cnblogs.com/oyer/p/5611508.html

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <script>
        function myFunction() {
            var btn1 = document.getElementById("btn1");
            alert(btn1.innerText); //我是按钮   
            alert(btn1.innerHTML); //我是按钮
            alert(btn1.value); //空，按钮不能用Value!
            btn1.value = "value"; //按钮不可以这样改变值
            btn1.innerText = "innerText"; //按钮可以用innerText改变值
            btn1.innerHTML = "innertHTML"; //按钮也可以用 innerHTML改变值

            var input1 = document.getElementById("input1");
            alert(input1.value); //可以获取值
            alert(input1.innerText); //没有值
            alert(input1.innerHTML); //没有值
            input1.value = 5; //可以改变值
            input1.innerText = 6; //不可以改变值
            input1.innerHTML = 7; //不可以改变值

            var html2 = document.getElementById("test");
            alert(test.innerHTML); // <span style="color:red">test1</span> test2 
            alert(test.innerText); //test1 test2
            alert(test.outerHTML);
            //结果如下：
            //<div id="test"> 
            //   <span style="color:red">test1</span> test2 
            //</div>
        }
    </script>
    <input id="input1" type="text" />
    <button id="btn1" type="button" onclick="myFunction()">
        我是按钮</button>
    <p id="mess">
    </p>
    <div id="test">
        <span style="color: red">test1</span> test2
    </div>
</body>
</html>

敲代码的余文乐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
button,input,html与value,innerText,innerHTML的对应关系

<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body> <script> function myFunction() { var btn1 = document.getElementById("btn1"); ...
复制链接

扫一扫