“这是我参与8月更文挑战的第20天,活动详情查看: 8月更文挑战”
元素对象属性
value属性
通过元素对象.value获取元素对象的value值;
通过元素对象.value = 设置的value值,设置元素对象的value值。
<input type="text" id="t1" value="Hello" />
<script>
//需要把元素的value属性值取出来
var t1 = document.getElementById("t1");
alert(t1.value);
</script>
这时我想把t1的value值变成HelloWorld。
t1.value = "HelloWorld"
className属性
通过元素对象.className获取元素对象的class属性值;
通过元素对象.className = 设置的class属性值,设置元素对象的class属性值。
<style>
.ys1{
color:red;
}
.ys2{
color: blue;
}
</style>
<body>
<span id="s1" class="ys1">今天天气好晴朗!</span>
<script>
var s1 = document.getElementById("s1");
alert(s1.className);
</script>
</body>
这里我给出了两个样式,当前使用的是样式1,当我们改变它的className值后,再来看效果。
s1.className="ys2"
可以发现,元素样式已经被改变。
checked属性
通过元素对象.checked获取元素对象的checked属性值;
通过元素对象.checked = 设置的checked属性值,设置元素对象的checked属性值。
checked在HTML中表示单选框或者复选框的默认值,需要注意的是HTML中的checked=“checked”,在JavaScript中返回true,不是选中状态返回false。
下面我们来看怎么使用。
<input type="checkbox" id="sex"/>
<script>
var sex = document.getElementById("sex");
alert(sex.checked);
</script>
这里刚开始我们没有设置checked属性,所以默认是false,那我们把复选框设置为选中。
sex.checked=true;
已经变成了选中状态了哦。
innerHTML属性
innerHTML属性操作元素的内容体。
通过元素对象.innerHTML获取元素对象的内容体。
通过元素对象.innerHTML = 属性值 设置元素对象的内容体。
来试试看吧。
获取元素的内容体。
<span id="s1">今天天气好晴朗</span>
<script>
var s1 = document.getElementById("s1");
alert(s1.innerHTML);
</script>
改变元素的内容体。
s1.innerHTML="今天好像要下雨";
这是重新设置了内容体,那我们想要在内容体后面追加内容怎么办呢?
s1.innerHTML+=",记得要带伞!";
写在最后
好了,关于DOM对象的常见属性,我们就说到这里了,以上内容如有不正之处,欢迎掘友们批评指正!快来动手试一试吧。