JavaScript 属性操作

Posted 2020-08-27 黄鹂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 属性操作相关的知识，希望对你有一定的参考价值。

 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 属性操作的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段