javascript - 将 css 添加到具有现有 css 的元素

Question

如果我有一个带有预定义 css 样式的 html 元素

<h1 style="color:blue;">This is a header</h1>

现在，如果我想添加一个名为text-align:centerh1 元素的新样式。

如何在不覆盖现有样式的情况下将新样式属性添加到样式属性的末尾？

所以结果看起来像

<h1 style="color:blue;text-align:center">This is a header</h1>

Answer 1

这是执行此操作的三种方法：

jsfiddle 示例

1 - 设置元素样式属性- 动态 JavaScript 样式，但可以说打破了关注点分离

HTML：

<h1 id="headerExample1" style="color:blue;">This is a header</h1>

JavaScript：

var ex1 = document.getElementById('headerExample1');

if (someLogic) {
    ex1.style.textAlign = "center";
}

2 - 设置样式属性- 这是三个属性中最脏的，但确实让您了解如何style使用 JavaScript 直接访问/更改属性

HTML：

<h1 id="headerExample2" style="color:blue;">This is a header</h1>

JavaScript：

var ex2 = document.getElementById('headerExample2');

if (someLogic) {
    ex2.setAttribute('style', ex2.getAttribute('style') + ";text-align:center");
}

3 - CSS 和类- 这是关于关注点分离的标题样式最简洁的方法

HTML：

<h1 id="headerExample3">This is a header</h1>

CSS：

#headerExample3 {color:blue;}
.centered {text-align:center;}

​ JavaScript：

var ex3 = document.getElementById('headerExample3');

if (someLogic) {
    ex3.className = "centered";
}

Answer 2

使用内联样式是个坏主意，因为很难覆盖它们，并且保持内容和布局的分离在 Web 开发中很重要。

最好使用样式表：

h1 {
    color:blue;
    text-align:center
}

使用 JavaScript：

document.getElementsByTagName('h1').style.textAlign="center";

Answer 3

使用 javascript: document.getElementById("h1id").style.textAlign = "center";

将上面的 h1id 替换为您将在 html 中提供的 id。