JS 点击按钮切换背景颜色并添加注释 - 简单代码示例

这是一个简单的 JavaScript 页面，点击按钮可以切换背景颜色，同时可以添加注释。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>点击换颜色加注释</title>
	<style>
		body{
			background-color: #f5f5f5;
			font-size: 20px;
			text-align: center;
			padding-top: 50px;
		}
		button{
			margin: 20px;
			padding: 10px 20px;
			font-size: 18px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<button onclick='changeColor()'>点击换颜色</button>
	<script>
		function changeColor(){
			var body = document.querySelector('body');
			if (body.style.backgroundColor == '') {
				body.style.backgroundColor = '#4CAF50';
				body.innerHTML += '<p>背景颜色变成了绿色！</p>';
			} else {
				body.style.backgroundColor = '';
				body.innerHTML += '<p>背景颜色变回原来的颜色了！</p>';
			}
		}
	</script>
</body>
</html>

JS 代码解析：

1. 通过 querySelector() 方法获取文档中的 body 元素。

2. 判断 body 元素的 background-color 属性是否为空，如果为空则将 background-color 属性设置为绿色，同时在 body 元素中添加一个 p 元素，显示 '背景颜色变成了绿色！'，否则将 background-color 属性设置为空，同时在 body 元素中添加一个 p 元素，显示 '背景颜色变回原来的颜色了！'。

3. 在 button 元素中添加 onclick 事件，调用 changeColor() 函数。