How do you get a CSS value in Javascript and save it as a variable?

Question

how to got connect to css/html and get the current color of a div and then save it as a variable for further work in java script? e.g. there is a red element on your html page and you want to find its color then save it as a variable in js.

Html

<div type="button" value="a1" id="a1" onclick="fire(this.id);">a1</div>

CSS

#a1{
    color: white;
    background-color: darkblue;
}

i change the color of this div tho once further in my program. Yeah so im currently not sure how to grab the color of the div once it has been changed through java script.

See [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) — trincot, Nov 08 '19 at 08:02
Do you want to find out which element on your page has a specific color or do you know from which element you need the color from? — empiric, Nov 08 '19 at 08:04
@empiric yeah i know the element i'm trying to get the color from i just don't know how to source it from the html page — Will Layton, Nov 10 '19 at 21:24

score 0 · Answer 1 · edited Nov 08 '19 at 08:56

0

First you need the element (in your case the div): document.getElementById(:id) to get by html Id OR document.querySelector(:selectors) to get by css selectors.

Then if my mind isn’t playing tricks on me you just grab that element and look for style and the prop you want to read: myDiv.style.color

edited Nov 08 '19 at 08:56

Mert Köklü

2,183
2
16
20

answered Nov 08 '19 at 08:08

João Glória

11
3

This only works if the element has inline styling, not if it gets its styling from a stylesheet. – Lennholm Nov 08 '19 at 09:47

How do you get a CSS value in Javascript and save it as a variable?

1 Answers1