JavaScript之属性读写操作
Posted 静心*尽力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之属性读写操作相关的知识，希望对你有一定的参考价值。
属性 分为属性名 和 属性值
在标签中设置属性 方法="属性值"
在css中设置属性 方法:属性名:属性值
操作
读操作 获取 查找
格式:元素.属性名 例:变量名.style.属性名
写操作 添加 替换 修改
格式:元素.属性名=新要设置的值 例:变量名.style.属性名=\'属性值\'
一.属性读操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS读写操作</title> 6 </head> 7 <body> 8 <input type="text" value="" id="文本"> 9 <input type="button" value="onclickMe" id="按钮"> 10 <br> 11 <figcaption>迪丽热巴,美到极致!</figcaption> 12 <img src="" alt="美到极致!" id="img" width="500px" height="500px"> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 var text=document.getElementById(\'文本\'); 17 var button=document.getElementById(\'按钮\'); 18 var img=document.getElementById(\'img\'); 19 读操作示例 20 button.onclick=function(){ 21 alert(text.value); 22 }; 23 </script>
在文本框中写入:
由于alert()是在窗口显示括号中的内容,故文本框的输入的内容会被显示在窗口,这就是属性值的读取,即属性的读操作(本人是这么理解,还是菜鸟一枚)
点击后效果:
二.属性写操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS读写操作</title> 6 </head> 7 <body> 8 <input type="text" value="" id="文本"> 9 <input type="button" value="onclickMe" id="按钮"> 10 <br> 11 <figcaption>迪丽热巴,美到极致!</figcaption> 12 <img src="" alt="美到极致!" id="img" width="500px" height="500px"> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 var text=document.getElementById(\'文本\'); 17 var button=document.getElementById(\'按钮\'); 18 var img=document.getElementById(\'img\'); 19 //写操作示例 20 button.onclick=function(){ 21 img.src=\'D:/照片大全/我女神/俏皮元气.jpg\'; 22 }; 23 </script>
将img元素的src属性赋予地址值,就是写操作
点击效果:
三.两者结合一下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS读写操作</title> 6 </head> 7 <body> 8 <input type="text" value="" id="文本"> 9 <input type="button" value="onclickMe" id="按钮"> 10 <br> 11 <figcaption>迪丽热巴,美到极致!</figcaption> 12 <img src="" alt="美到极致!" id="img" width="500px" height="500px"> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 var text=document.getElementById(\'文本\'); 17 var button=document.getElementById(\'按钮\'); 18 var img=document.getElementById(\'img\'); 19 button.onclick=function(){ 20 img.src=text.value; 21 }; 22 </script>
文本框输入的地址值赋给图片的src属性,读操作和写操作的结合
点击效果:
以上是关于JavaScript之属性读写操作的主要内容，如果未能解决你的问题，请参考以下文章