get style property value using css()

Question

<p class="pen" style="color:#000">abc</p>

.pen{
color:#333
}

In the above html and css, the inline style has greater precedence than the class, thus #000 will be used. But when I do $('.pen').css('color'), I get #333. How can I get the color of the current style?

This is unexpected behavior. Can you provide additional code/markup? — Will Reese
– Will Reese, Commented Apr 3, 2015 at 2:40
@WillReese what is unexpected? I guess I have given quite a lots of detail. — Elton Jamie
– Elton Jamie, Commented Apr 3, 2015 at 2:41
OP said :: "But when I do $('.pen').css('color'), I will got the #333. " that is incorrect. the output I got on my fiddle says otherwise. So I am still trying to understand how OP got the value #333 or its equivalent as his output to the command — Sai
– Sai, Commented Apr 3, 2015 at 2:49
Unless OP can reproduce the issue, I vote to close this as off-topic. — Sai
– Sai, Commented Apr 3, 2015 at 2:54

Shaunak D · Accepted Answer · 2015-04-03 04:50:29Z

2

If you have two elements with the same class

<p class="pen" style="">abc</p>
<p class="pen" style="color:#000">abc</p>

and run,

$('.pen').css('color')

The output would b #333 or rgb(51,51,51).; because the selector finds the first element matching. So this is the problem with your code - Multiple elements with class pen.

Fiddle

In case of single pen element or the order

<p class="pen" style="color:#000">abc</p>
<p class="pen" style="">abc</p>

the output is #000.

Fiddle

edited Apr 3, 2015 at 4:50

answered Apr 3, 2015 at 4:36

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

get style property value using css()

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related