Question

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

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

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

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

所以结果看起来像

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

Answer 1

这是三种方法：

jsfiddle example

1 - 设置元素样式属性 - 动态JavaScript样式，但可以说是separation of concerns

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 - 设置样式属性 - 这是三者中最脏的，但确实让您了解如何使用JavaScript直接访问/更改style属性

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和类 - 这是根据separation of concerns

设置标题样式的最简洁方法

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。

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

3 个答案: