属性名 属性值
相关操作：读与取
一、属性读操作：元素.属性，其实在就是找到等号右边的值
代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="text"> <select name="" id="select"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="hz">杭州</option> </select> <input type="button" value="按钮" id="button"> </body> <script> function $(id) { return document.getElementById(id); } $('button').onclick=function(){ var a=$('text').value+'在'+$('select').value; alert(a) } </script> </html>
二、属性写操作：("添加")替换、修改
元素.属性名=新的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="text"> <select name="" id="select"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="hz">杭州</option> </select> <input type="button" value="按钮" id="button"> </body> <script> function $(id) { return document.getElementById(id); } $('button').onclick=function(){ $('button').value='button';//button的值原为按钮，将其修改为button $('text').value="老朋友";//原先text的值为空，其实是把空值修改为有值 } </script> </html>
三、innerHTML 读取元素内的所有HTML元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="button"> <p id="content">这是一段文字</p> </body> <script> function $(id) { return document.getElementById(id); } $('button').onclick=function(){ var a=$('content').innerHTML; alert(a) } </script> </html>
动态添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="text"> <input type="button" value="按钮" id="button"> <p id="content"></p> </body> <script> function $(id) { return document.getElementById(id); } $('button').onclick=function(){ $('content').innerHTML=$('text').value;//将写入文本框的内容，动态添加到P标签中 } </script> </html>
同样，写可以插入图片
插入按钮
练习：input中输入文字内容，可以在文本框中显示
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 300px; margin: 200px auto; height: 200px; } #content{ border: 1px solid #000; height: 200px; } #submit{ margin-left: 30px; } </style> </head> <body> <div id="box"> <div id="content"></div> <span id="name">主人：</span><input type="text" id="text"><input type="button" id="submit" value="提交"> </div> </body> <script> function $(id){ return document.getElementById(id); } window.onload=function () { $('submit').onclick=function(){ $('content').innerHTML+=$('name').innerHTML+$('text').value+'<br />';//这边有一个值得注意的：span是没有value属性的，只有表单元素具有value属性 $('text').value=''; } } </script> </html>
四、属性操作注意事项
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input{ cursor: pointer; } .red{ color: red; width: 300px; background-color: yellow; } .blue{ color: yellow; width: 300px; background-color: red; } </style> </head> <body> <div class="box"> <input type="button" value="+" id="add"> <input type="button" value="-" id="duce"> <input type="button" value="红" id="red" > <input type="button" value="蓝" id="blue"> <p id="introduce" >钉钉(DingTalk)-由阿里巴巴集团开发,免费提供给所有中国企业用于商务沟通和工作协同!钉钉-中国领先的智能移动办公平台!</p> </div> </body> <script> function $(id) { return document.getElementById(id); } var num=15; $('add').onclick=function(){ num++; $('introduce').style.fontSize=num+'px';//JS中不允许出现'-'，所以font-size应该写成fontSize } $('duce').onclick=function(){ num--; $('introduce').style.fontSize=num+'px'; } $('red').onclick=function(){ $('introduce').className='red';//注意：给一个元素动态添加类，不是class，而是className } $('blue').onclick=function(){ $('introduce').className='blue'; } </script> </html>
2.控制元素浮动
如果想要修改float属性，得注意IE（styleFloat）、非IE（cssFloat）（浏览器的兼容问题）
即写成
更好的方法是：写一个类，在类里写上浮动样式，修改类即可。
3.想要实现一个效果：
有一个div框，在第一个text输入框中输入修改的属性，第二个输入值，则div框就会相应的被修改
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; border:1px solid black; background-color: ; } </style> </head> <body> 输入想要修改的属性：<input type="text" id="attr"></br> 输入修改属性的值：<input type="text" id="val"></br> <input type="button" value="按钮" id="btn"> <div id="box"></div> </body> <script> function $(id) { return document.getElementById(id); } $('btn').onclick=function(){ $('box').style[$('attr').value]=$('val').value;//此处注意：要修改box的style，属性值可以通过value直接拿到，并且是个定值。但是，一个div的属性有很多种，可以是宽 高 背景色等等，是变化的，所以不能直接写定值。也不可以写成$('box').style.$('attr').value，因为'.'后面接的不应该是变量 } </script> </html>
在JS中，允许将'.'替换成'[]'，即将点替换成中括号，并且不存在浏览器的兼容性问题。'.'后面的值无法修改，'[]'里面的值可以随便写。