属性 分为属性名 和 属性值
在标签中设置属性 方法="属性值"
在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属性,读操作和写操作的结合
点击效果:
原文地址：https://www.cnblogs.com/zjm1999/p/10220514.html
时间： 2024-10-08 18:45:28