Changing the Style Attributes in javascript use className

Question

HTML

<h1>Changing the Style</h1>
<p>JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="openMe()">Open!</button>
<button type="button" onclick="closeMe()">Close!</button>

<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>

CSS

.close {
    display: none;
}
.open {
    display: block;
}

button {
    width:150px;
    background-color: #00CCEE;
    margin-left:15px;
    font-size:120%;
}

#demo {
    color:white;
    background-color: #7F7F7F;
    padding:10px;
    font-size:120%
}

JAVASCRIPT

function closeMe(){
    x=document.getElementById("demo");
    x.className="close";
}

function openMe(){
    x=document.getElementById("demo");
    x.className="open";
}

Can I use Like x.IdName= "close"; In Javascript?

So far I know there are two ways to change style attributes using Javascript.

x = document.getElementById("demo");

directly eg.. (x.style.backgroundColor ="red";
by Class name eg.. (x.className="abc";)

for using class name we do use:
```
x = document.getElementById("demo");
x.className="abc";
```
My questions:

Can I use Id to change style attributes insted of useing className? if yes Please show.

Can I call "x" {x=document.getElementById("demo");} a variable?

You could always add `className="abc"` to the rest instead of using a variable if what you want is to add it with a single line of code. `document.getElementById("demo").className="abc"` — PWL, Mar 09 '16 at 13:40

score 0 · Accepted Answer · edited May 23 '17 at 10:28

There are three ways to modify the style of an element with JavaScript:

Modify the inline style. This is represented by the .style property on the element and the style attribute on the HTML tag.
Modify any feature of the element so that selectors on rulesets in the stylesheet start and or stop matching it. e.g. .foo { ... } would match elements that are members of the foo class, so if you modify the .className property to add or remove an element from that class, you will change the rules that apply to it. You can change other factors such as the id (not usually a logical idea), arbitrary attributes, or anything else that a selector exists for.
Modify the rulesets in the stylesheet itself.

How to change with Id?? As you explained in Number 2, I really want to know how to change with id . thanks — Red Ali, Mar 09 '16 at 15:02

score 0 · Answer 2 · answered Mar 09 '16 at 13:40

You've already modified the style attribute of the element in your example.

x.style.backgroundColor= "red";

This is what modifying the style attribute is. The second example you edit the elements class name. I'm assuming what you mean is if you can apply styles to elements, using ids?

If that's the case, you can style elements by using the class selector which looks like this

.className {
    /* Some styles */
}

Or with the id selector

#demo {
    /* Other styles */
}

The two examples above either need to go into their own stylesheet, or inside the HTML in a <style></style> element.

I'm assuming what you mean is if you can apply styles to elements, using ids? yes but I want to apply style in JS not in CSS. like for class with is created with style elements in CSS can be used in (style.className="Abc"; ) Js to change HTML, in the same way... Can I use IDs in Javascript like ( style.idName = "Abc" ; ) ?? — Red Ali, Mar 09 '16 at 14:05

score 0 · Answer 3 · answered Mar 09 '16 at 13:43

document.getElementById selects element having certain ID. When You want to select elements by a classname, you can use i.e. document.querySelector('.your-class') to select nodes containing your-class className.

When You write

x = document.getElementById("demo");
x.style.backgroundColor ="red"

You are setting style using Id to select a node.

In the line x = document.getElementById("demo");x is the variable. After running this line, the value of this variable is set to whatever function document.getElementById("demo"); returns. In this case, it's pointing to DOM element with Id attribute "demo".

Changing the Style Attributes in javascript use className

3 Answers3