js页面点击换颜色加注释
这是一个简单的js页面，点击按钮可以切换背景颜色，同时可以添加注释。
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()函数。
原文地址: https://www.cveoy.top/t/topic/bkMN 著作权归作者所有。请勿转载和采集!