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

JavaScript 属性操作

时间:2017-01-13 00:47:27      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:innerhtml   上海   修改   cti   src   log   window   标题   val   

 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>

第四、实例

JavaScript 属性操作

标签:innerhtml   上海   修改   cti   src   log   window   标题   val   

原文地址:http://www.cnblogs.com/xiaomili/p/6280107.html

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