cannot return css property of HTML element

Question

There is element in HTML: <div id="block"></div>, and it's property via CSS:

#block { 
    background: red;
 }

If I want to assign in JavaScript to some variable a property from CSS, like this:

var value = document.getElementById('block').style.background // It doesn't work

How can I solve this problem?

BTW: For color, use `background-color` in CSS and `backgroundColor` in Javascript. — Abhitalks, Jun 25 '14 at 14:02
The `style` object only contains *local* styles - those set *directly* on the element. Getting the effective style as cascaded through all style sheets is somewhat of a pain, and differs between (old) IE and other browsers. This is one of the more useful things that a framework can help you with. — Pointy, Jun 25 '14 at 14:03
@JacobLutin: That is because it is via CSS. See Pointy's comment above and j08691's answer below. — Abhitalks, Jun 25 '14 at 14:07

score 4 · Accepted Answer · answered Jun 25 '14 at 14:04

4

var value = window.getComputedStyle(document.getElementById('block')).getPropertyValue("background-color");
console.log(value);

answered Jun 25 '14 at 14:04

j08691

2

Also see [this question](http://stackoverflow.com/questions/15733365/cross-browser-ie8-getcomputedstyle-with-javascript) for Internet Explorer 8 and below. – Pointy Jun 25 '14 at 14:05

score 0 · Answer 2 · answered Jun 25 '14 at 14:06

0

You could use single line of jQuery for this :

var value = $("#block").css("background-color");

answered Jun 25 '14 at 14:06

Kedar.Aitawdekar

How is it in any way related to the question? – Abhitalks Jun 25 '14 at 14:08
Whenever we assign background:; to element, it is stored as background-color property of that element. And as per question,JacobLutin wanted to extract the value of property background-color of the div#block and assign it to some variable. And var value = $("#block").css("background-color"); does the required. – Kedar.Aitawdekar Jun 25 '14 at 14:19
I meant the question is not tagged jQuery. The question is about not being able to get the property via 'style' property in Javascript. – Abhitalks Jun 25 '14 at 14:24
Ok, I got it. Mistakenly did not focused on it. – Kedar.Aitawdekar Jun 25 '14 at 14:30

score 0 · Answer 3 · answered Jun 25 '14 at 14:07

0

If you can use jQuery on your project I recommend using .css() jquery function

Eg.: Setting css

$('#block').css({background:'black'});

Getting css:

var cssValues = $('#block').css('background'});

See more about this here

answered Jun 25 '14 at 14:07

Melvinr

How is it in any way related to the question? – Abhitalks Jun 25 '14 at 14:09
Did you see the "Getting css" section? – Melvinr Jun 25 '14 at 14:17
I meant the question is not tagged jQuery. The question is about not being able to get the property via 'style' property in Javascript. – Abhitalks Jun 25 '14 at 14:23
1

Got it, and yes it only applies "If you can use jQuery on your project". Sometimes different approaches are useful – Melvinr Jun 25 '14 at 14:31

score -2 · Answer 4 · edited Jun 25 '14 at 14:43

-2

You can try this -

var  block = document.getElementById("block");
block.setAttribute("style","background-color: red;");

edited Jun 25 '14 at 14:43

Boris Stitnicky

answered Jun 25 '14 at 14:08

Ashish Sangal

I don't need to assign property to element, I need to return it don't changing propery in javascript. – jl284 Jun 25 '14 at 14:11

4 Answers4