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属性,读操作和写操作的结合
点击效果:
