1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML 的属性操作：读、写 10 属性名： 11 属性值： 12 13 读操作：获取、找到 14 元素.属性名 15 16 */ 17 window.onload = function (){ 18 var oBtn = document.getElementById('btn1'); 19 var oText = document.getElementById('text1'); 20 var oSelect = document.getElementById('select1'); 21 22 oBtn.onclick = function (){ 23 // alert(oBtn.value); // '按钮' 24 // alert( oText.value ); 25 // alert( oSelect.value ); 26 27 // 字符串连接 28 // oText.value oSelect.value 29 // '刘伟' + '北京' => '刘伟北京' 30 // '刘伟' + '在' + '北京' => '刘伟在北京' 31 32 alert(oText.value + ' 在 ' + oSelect.value); 33 }; 34 }; 35 </script> 36 37 </head> 38 39 <body> 40 41 <input id="text1" type="text" /> 42 <select id="select1"> 43 <option value="北京">北京</option> 44 <option value="上海">上海</option> 45 <option value="杭州">杭州</option> 46 </select> 47 <input id="btn1" type="button" value="按钮" /> 48 49 </body> 50 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML 的属性操作：读、写 10 属性名： 11 属性值： 12 13 写操作：“添加？”、替换、修改 14 元素.属性名 = 新的值 15 16 */ 17 window.onload = function (){ 18 var oBtn = document.getElementById('btn1'); 19 var oText = document.getElementById('text1'); 20 var oImg = document.getElementById('img1'); 21 22 oBtn.onclick = function (){ 23 oImg.src = oText.value; 24 }; 25 }; 26 </script> 27 28 </head> 29 30 <body> 31 32 <input id="text1" type="text" /> 33 <input id="btn1" type="button" value="按钮" /> 34 <p id="p1">这是一些文字</p> 35 <img id="img1" src="img/1.jpg" width="200" /> 36 37 </body> 38 </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>
第四、实例