首页 > 代码库 > js属性
js属性
1.属性的操作方式
* 1、.表示的意思 * 元素.属性名 * 如果属性是单一属性,用点操作符是取不到的,而且还会报错 * 如果想要用点操作符获取带横杠的属性,那首先要把横杠去掉,然后把横杠后面的第一个字母大写 * 2、[] 表示的意思 * 如果属性中带横杠,用[]的方式去操作属性 * []既可以操作符合变量命名规则的属性,也可以操作不符合变量命名规则的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" id="btn" value="http://www.mamicode.com/按钮" style="width: 50px; height: 50px; background: #ff0000;font-size: 20px" /> <script> var btn=document.getElementById(‘btn‘); btn.onclick=function(){ //alert(btn.type); //button //console.log(btn.id); //btn console.log(btn.value); //按钮 btn.value=http://www.mamicode.com/‘小按钮‘; //修改属性>
也就是说,如果属性不是符合命名规则的属性,可以使用[]来获取属性;当然,如果属性符合命名规则,也可以使用[]来获取属性;
2.常用属性
2.1 value
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /* * * value * 表单的值 * * */ window.onload= function () { var btn=document.getElementById(‘btn‘); var text=document.getElementById(‘text‘); console.log(btn.value); //按钮 console.log(text.value); //这里是一段文字 text.value=http://www.mamicode.com/‘kaven‘;"button" id="btn" value="http://www.mamicode.com/按钮" /> <input type="text" name="text" id="text" value="http://www.mamicode.com/这里是一段文字" /> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" id="btn" value="http://www.mamicode.com/按钮" style="width: 50px; height: 50px; background: #ff0000;font-size: 20px" /> <script> var btn=document.getElementById(‘btn‘); btn.onclick=function(){ //alert(btn.type); //button //console.log(btn.id); //btn console.log(btn.value); //按钮 btn.value=http://www.mamicode.com/‘小按钮‘; //修改属性>
2.2 innerHTML
* 在给innerHTML设置值的时候,如果这个值里面有html标签,那放到网页中,会把它解析成为一个真正的html标签 * 如果标签对当中有其他的标签,一样会拿得到
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> window.onload= function () { var btn=document.getElementById(‘btn‘); var box=document.getElementById(‘box‘); btn.onclick= function () { console.log(box.innerHTML); //设置 box.innerHTML=‘<span>kaiven<span/>‘; } }; </script> <input type="button" id="btn" value="http://www.mamicode.com/按钮" /> <div id="box"><p>标题</p>这里是一段文字</div> </body> </html>
2.3 classname
* className * 注意:class是js中的一个保留字,它是不允许我们使用的 * 在获取class的时候,不能使用class,使用className
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="kaivon" id="kaivon"></div> <script> var kaivon=document.getElementById(‘kaivon‘); //console.log(kaivon.class); //undefined console.log(kaivon.className); //kaiven </script> </body> </html>
2.4 href和src
* href 连接的地址 * src 图片的地址 * * href与src取到的是绝对地址,不是属性里的值 * 切记不要拿href与src取到的值去做判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> window.onload= function () { var pic = document.getElementById(‘pic‘); var link = document.getElementById(‘link‘); console.log(pic.src); //http://localhost:63342/Python_Data_Analyse1/js%E5%AD%A6%E4%B9%A0/11.jpg console.log(link.href); //http://localhost:63342/Python_Data_Analyse1/js%E5%AD%A6%E4%B9%A0/%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7href_src.html# } </script> <img id="pic" src="http://www.mamicode.com/11.jpg"/> <a href="http://www.mamicode.com/#" id="link">js</a> </body> </html>
js属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。