JS DOM 改变元素属性JS DOM 改变HTML内容
JS DOM 改变CSS
HTML DOM允许JavaScript获取和更改HTML元素的样式（CSS）。
更改元素样式
您可以使用style属性将样式应用于特定的HTML元素。
要更改HTML元素的样式，请使用以下语法：
element.style.property = value
下面的示例更改<h1>元素的样式：
<!DOCTYPE html>
<html>
<h1 id="demo">HTML DOM style Property</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</html>测试看看‹/›当用户单击按钮时，此示例更改<h1>元素的样式：
<h1 id="demo">HTML DOM style Property</h1>
<button onclick="myFunc()">Click</button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
</script>测试看看‹/›当用户单击按钮时，此示例还更改了<h1>元素的样式：
<h1 id="demo">HTML DOM style Property</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">Click</button>测试看看‹/›从元素获取样式信息
同样，您可以使用style属性将样式应用于HTML元素。
以下示例将从具有id="demo"的元素获取样式信息（border-top）：
var x = document.getElementById("demo").style.borderTop;测试看看‹/›注意：当从元素中获取style样式信息时，该属性不是很有用，因为该属性仅返回元素的style属性中设置的样式规则，而不返回来自其他位置的样式规则，例如嵌入式样式表中的样式规则，或外部样式表。
要获取实际上用于呈现元素的所有CSS属性的值，可以使用以下window.getComputedStyle()方法：
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');测试看看‹/›将CSS类添加到元素
您也可以使用className属性将CSS类获取或设置为HTML元素。
document.getElementById("x").className = "para";测试看看‹/›您还可以使用该classList属性轻松地从元素获取，设置或删除CSS类。
下面的示例向<p>元素添加一个para类：
var elem = document.getElementById("x");
elem.classList.add("para");测试看看‹/›将多个类添加到<p>元素：
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");测试看看‹/›从<p>元素中删除一个类：
var elem = document.getElementById("x");
elem.classList.remove("para");测试看看‹/›在两个类之间切换<p>元素：
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");测试看看‹/›切换一个类（“打开”）以创建侧面导航按钮：
运行代码
JS DOM 改变元素属性JS DOM 改变HTML内容