innerHTML属性

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

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
		    <span>这是一个段落</span>
		</p>
		
		<script>
		    let obj = document.getElementById('one'); 
		    console.log(obj.innerHTML);                  
		    obj.innerHTML = '<span>hello world!</span>';  
		</script>
	</body>
</html>


复制代码

效果截图：

innerText属性

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

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
		    <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></div>
		
		<script>
		    let obj = document.getElementById('one');
		    console.log(obj.className);                
		    obj.className = 'two';
			console.log(obj.className);                
		</script>
	</body>
</html>


复制代码

效果截图：

style属性

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

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>这是一个div</div>
		
		<script>
		    let obj = document.getElementById('one'); 
		    obj.style.width = '500px';                
		    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';          
		</script>
	</body>
</html>


复制代码

效果截图：
图片[1]-DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）-一一网
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]
图片[2]-DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）-一一网
加油！