使用 JavaScript 更改 CSS

Created: November-22, 2018

純 JavaScript

可以通過元素的 style 屬性使用 JavaScript 新增，刪除或更改 CSS 屬性值。

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

請注意，樣式屬性以較低的駝峰案例樣式命名。在示例中，你會看到 css 屬性 font-family 在 javascript 中變為 fontFamily。

作為直接處理元素的替代方法，你可以在 JavaScript 中建立 <style> 或 <link> 元素，並將其附加到 HTML 文件的 <body> 或 <head>。

使用 jQuery 修改 CSS 屬性更簡單。

$('#element').css('margin', '5px');

如果你需要更改多個樣式規則：

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery 包含兩種方法來改變其中帶有連字元的 css 規則（即 font-size）。你可以將它們放在引號或駝峰式樣式規則名稱中。

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});