How to change multiple CSS styles with JavaScript?

Question

I want to change multiple CSS styles using JavaScript. I have a button clicking which should result in changing the color and font-size of the <p>.

button {color: white; background-color: black; border: none; padding: 10px 20px; transition-duration: .5s; cursor: pointer;}
button:hover {background-color: blue;}

<p id="demo">Changing multiple styles</p>

<button onclick="document.getElementById("demo").style.cssText = "fontSize: 35px; color: blue">Click Me!</button>

However, clicking the button gives me the following error:

{
  "message": "Uncaught SyntaxError: Unexpected end of input",
  "filename": "https://stacksnippets.net/js",
  "lineno": 13,
  "colno": 120
}

I did exactly what this answer suggested to a similar question. How to fix this error?

@pavel: How can I fix that? – pr0grammar Sep 01 '21 at 10:53 — pr0grammar, Sep 01 '21 at 10:53

score 1 · Answer 1 · answered Sep 01 '21 at 10:53

1

Just change the button code to this

    <button onclick="document.getElementById('demo').style.cssText = 'font-size: 35px; color: blue'">Click Me!</button>

U did closed the onclick function

answered Sep 01 '21 at 10:53

Endrit Shabani

190
1
12

Mihai T · Accepted Answer · 2021-09-01T11:00:58.543

You do not close the onclick declaration with ".

Also, inside the onclick use ' single quotes.

You either use single quotes as 'quote wrapping' and double quotes inside them either you use double quotes and single quotes inside.

But i suggest you use a different approach and toggle a className on the element. And style that className.

See second button

button {color: white; background-color: black; border: none; padding: 10px 20px; transition-duration: .5s; cursor: pointer;}
button:hover {background-color: blue;}

.blue {
  color: blue;
  font-size: 35px;
}

<p id="demo">Changing multiple styles</p>

<button onclick="document.getElementById('demo').style.cssText = 'font-size: 35px; color: blue'">Click Me!</button>


<button onclick="document.getElementById('demo').classList.toggle('blue')">Click Me 2!</button>

The font-size is still not changing at the same time as the colour. Is it just me or is it the same for you? — pr0grammar, Sep 01 '21 at 10:59
i changed it. it's `font-size` not `fontSize`. But again, i suggest you use the second solution — Mihai T, Sep 01 '21 at 11:01

How to change multiple CSS styles with JavaScript?

2 Answers2