您的位置：首页 > Web前端 > JavaScript

JavaScript中属性的用法

2017-06-08 21:26 127 查看

语法：元素.属性名

例如：console.log(btn.id);

1、属性不符合变量命名规则时

js中不识别符号‘-’：例如：font-size；

所以在属性的用法中，如：console.log(btn.style.font-size);

因为js不识别‘-’符号，所以font-size这个属性不能直接用点获取，执行时会把-以后的东西都去掉。解决方法如下：

(1)用 [ ]：

如：console.log(btn.style[‘font-size’]);

要把属性放在[‘ ’]中，[ ]里面可以是双引号或者单引号。

(2)用 .fontSize获取；

如：console.log(btn.style.fontSize);

去掉符号-，-后面第一个字母大写。

2、class属性的用法

注：class是js中的保留字，不允许直接获取class属性，例如：
<body>
<div class="kaivon" id="kaivon"></div>
</body>
<script>
var kaivon=document.getElementById('kaivon');
console.log(kaivon.class);//结果为undefined
</script>
解决方法：用 className;
如：console.log(kaivon.className);

3、innerHTML的用法

innerHTML获取到的是一个标签对里的所有内容。例如：
<script>
var btn=document.getElementById('btn');
var box=document.getElementById('box');
btn.onclick=function(){
console.log(box.innerHTML);//输出： <p>标题</p>这是文字 //(box标签对里所有内容)
}
box.innerHTML="<span>nihao<span>";//页面中box内的其他内容变成了 nihao。//（innerHTML设置值时，如果这个值里有html标签，在网页中会把innerHTML设置的值解析成真的html标签）//"
</script>
<body>
<input type="button"id="btn"value="按钮">
<div id="box"><p>标题</p>文字</div>
</body>

4、href 与 src；

href：链接的地址；src：图片的地址；

href和src取到的都是绝对地址，不是属性里的值，不能把href和src取到的值和页面URL处的值做判断。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航