JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

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");
测试看看‹/›

切换一个类(“打开”)以创建侧面导航按钮: