var el = document.querySelectorAll('.gange-color ul li'),
colorLesit = [],
i;
for (i = 0; i < el.length; i++) {
colorLesit.push(el[i].getAttribute('datacolor'));
el[i].addEventListener('click', function() {
document.body.classList.remove('red', 'green', 'purbal', 'black');
document.body.classList.add(this.getAttribute('datacolor'));
})
}* {
box-sizing: border-box;
}
.gange-color {
margin-left: 40%;
}
ul li {
display: inline-block;
list-style: none;
width: 30px;
height: 30px;
margin: 30px auto;
cursor: pointer;
}
ul li:first-child {
background-color: red;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: purple;
}
ul li:last-child {
background-color: black;
}
*emphasized text* h3 {
color: red;
font-size: 19px
}
.contant {
background-color: red;
padding: 30px;
}
.contant h4 {
color: white;
font-size: 17px
}<head>
<title>cangecolor</title> `
</head>
<body>
<div class="gange-color">
<ul>
<li datacolor='red'></li>
<li datacolor='green'></li>
<li datacolor='purbal'></li>
<li datacolor='black'></li>
</ul>
</div>
<h3>TWFSRG</h3>
<div class="contant">
<h4>TESTINH</h4>
</div>
</body>因为你还没有为正文定义 css 样式，例如
body.green {
background-color: green;
}