使用 JavaScript 更改 CSS

纯 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

使用 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"
});

也可以看看