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