add css to an element with exisiting css

Question

if I have an html element with predefined css style

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

Now if I want to add a new style called text-align:center to h1 element.

How can I add a new style attribute to the end of the style attribute without overwrite the existing style?

So the result will look something like

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

It seems you've answered your own question. Just add a semi-colon after text-align: center, though I'm not even sure thats required. — Scott S
– Scott S, Commented Dec 5, 2012 at 18:32
That would be referred to as a Cascading Style Sheet. It is an external document that defines styles for any number of elements on the page. — Shmiddty
– Shmiddty, Commented Dec 5, 2012 at 18:35

MikeM · Accepted Answer · 2012-12-05 19:02:51Z

Here's three methods of doing this:

jsfiddle example

1 - set element style property - on the fly JavaScript styling, however arguably breaks 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 - set the style attribute - this is the dirtiest of the three but does give you an idea of how you can access/change the style property directly using 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 and classes - this is the cleanest way to style the header with regard to 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";
}

Diodeus - James MacFarlane · Accepted Answer · 2012-12-05 18:33:13Z

0

Using inline styles is a bad idea because it is difficult to override them and maintaining separation of content and layout is important in web development.

Best to use a stylesheet:

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

with JavaScript:

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

answered Dec 5, 2012 at 18:33

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Rups · Accepted Answer · 2012-12-05 18:38:41Z

0

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

Replace the h1id above with the id you will provide in the html.

answered Dec 5, 2012 at 18:38

Rups

6391 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

add css to an element with exisiting css

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related