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属性,读操作和写操作的结合

点击效果: