JavaScript 属性操作

时间：2022-02-04 08:38:31
 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         读操作：获取、找到

         元素.属性名

 */

 window.onload = function (){

     var oBtn = document.getElementById('btn1');

     var oText = document.getElementById('text1');

     var oSelect = document.getElementById('select1');

     oBtn.onclick = function (){

         // alert(oBtn.value);        // '按钮'

         // alert( oText.value );

         // alert( oSelect.value );

         // 字符串连接

         // oText.value    oSelect.value

         // '刘伟' +  '北京'     =>    '刘伟北京'

         // '刘伟' + '在' + '北京'     =>    '刘伟在北京'

         alert(oText.value + ' 在 ' + oSelect.value);

     };

 };

 </script>

 </head>

 <body>

 <input id="text1" type="text" />

 <select id="select1">

     <option value="北京">北京</option>

     <option value="上海">上海</option>

     <option value="杭州">杭州</option>

 </select>

 <input id="btn1" type="button" value="按钮" />

 </body>

 </html>
 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         写操作：“添加？”、替换、修改

         元素.属性名 = 新的值

 */

 window.onload = function (){

     var oBtn = document.getElementById('btn1');

     var oText = document.getElementById('text1');

     var oImg = document.getElementById('img1');

     oBtn.onclick = function (){

         oImg.src = oText.value;

     };

 };

 </script>

 </head>

 <body>

 <input id="text1" type="text" />

 <input id="btn1" type="button" value="按钮" />

 <p id="p1">这是一些文字</p>

 <img id="img1" src="img/1.jpg" width="200" />

 </body>

 </html>

第三、innerHTTML 操作

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

/*

    HTML 的属性操作：读、写

        属性名：

        属性值：

        oP.innerHTML                    => 读取p里面所有的html代码

        oP.innerHTML = 123;        => 替换p里面所有的html代码

*/

window.onload = function (){

    var oBtn = document.getElementById('btn1');

    var oText = document.getElementById('text1');

    var oP = document.getElementById('p1');

    oBtn.onclick = function (){

        // oImg.src = oText.value;

        // alert( oP.innerHTML );

        oP.innerHTML = oText.value;

        oText.value = '' ;

    };

};

</script>

</head>

<body>

<input id="text1" type="text" />

<input id="btn1" type="button" value="按钮" />

<p id="p1">这是一些文字</p>

</body>

</html>

第四、实例

相关文章