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");
            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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM