DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）

最新推荐文章于 2023-07-12 13:37:38 发布

牛哄哄的柯南

最新推荐文章于 2023-07-12 13:37:38 发布

阅读量4.1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： js html dom操作

本文链接：https://blog.csdn.net/weixin_43883917/article/details/109705293

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML DOM对象中的四项关键属性：innerHTML用于操作HTML内容，innerText专为纯文本，className管理样式类，style则控制样式。通过实例演示和效果截图，展示如何在实际开发中使用这些属性进行元素操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerHTML属性

innerHTML属性：用于设置或获取HTML 元素中的内容。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="one">
		    <span>这是一个段落</span>
		</p>
		
		<script>
		    let obj = document.getElementById('one'); // 获取id=one的p标签
		    console.log(obj.innerHTML);                  // 显示内容：<span>这是一个段落</span>
		    obj.innerHTML = '<span>hello world!</span>';  // 修改内容为： hello world!
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

innerText属性

innerText属性：用于设置或获取HTML 元素中的纯文本。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="one">
		    <span>这是一个段落</span>
		</p>
		
		<script>
		    let obj = document.getElementById('one');
		    console.log(obj.innerText);    // 显示文本内容 “这是一个段落”
		    obj.innerText = 'hello world!'; //修改文本内容
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

className属性

className属性：用于设置或获取DOM对象的类样式。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="one" class="first"></div>
		
		<script>
		    let obj = document.getElementById('one');
		    console.log(obj.className);                // 修改前 first
		    obj.className = 'two';
			console.log(obj.className);                // 修改后 two
		</script>
	</body>
</html>

效果截图：
在这里插入图片描述

style属性

style属性：用于设置或获取DOM对象的style样式。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="one">这是一个div</div>
		
		<script>
		    let obj = document.getElementById('one'); // 通过id获取div
		    obj.style.width = '500px';                // 通过style修改各种属性
		    obj.style.height = '300px';
		    obj.style.backgroundColor = 'gray';
		    obj.style.fontSize = '20px';
		    obj.style.color = '#fff';
		    obj.style.border = 'solid 5px red';
		    obj.style.display = 'block';          //设置DOM对象的显示和隐藏
		</script>
	</body>
</html>