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(){ 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中,允许将'.'替换成'[]',即将点替换成中括号,并且不存在浏览器的兼容性问题。'.'后面的值无法修改,'[]'里面的值可以随便写。