【JavaWeb基础 · JavaScript--DOM元素对象的属性】

216 阅读2分钟

“这是我参与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>

image.png 这时我想把t1的value值变成HelloWorld。

t1.value = "HelloWorld"

image.png

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>

image.png 这里我给出了两个样式,当前使用的是样式1,当我们改变它的className值后,再来看效果。

s1.className="ys2"

image.png 可以发现,元素样式已经被改变。

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>

image.png 这里刚开始我们没有设置checked属性,所以默认是false,那我们把复选框设置为选中。

sex.checked=true; image.png 已经变成了选中状态了哦。

innerHTML属性

innerHTML属性操作元素的内容体。

通过元素对象.innerHTML获取元素对象的内容体。

通过元素对象.innerHTML = 属性值 设置元素对象的内容体。

来试试看吧。

获取元素的内容体。
                <span id="s1">今天天气好晴朗</span>
		<script>
			var s1 = document.getElementById("s1");
			alert(s1.innerHTML);
		</script>

image.png 改变元素的内容体。

s1.innerHTML="今天好像要下雨";

image.png 这是重新设置了内容体,那我们想要在内容体后面追加内容怎么办呢? s1.innerHTML+=",记得要带伞!";

image.png

写在最后

好了,关于DOM对象的常见属性,我们就说到这里了,以上内容如有不正之处,欢迎掘友们批评指正!快来动手试一试吧。