Is this inline style or css file style returns with jquery .css()

Question

I want to check right padding value of div element. I use jquery .css() method:

$('div').css('padding-right');

It works. Now I need to know where it value comes from. It can by inline defenition:

<div style="padding-right: 100px;">

or it can be wrote in external css file (or <style></style> section):

div {
    padding-right: 100px;
}

Thanks!

You can inspect the element in developer tools in Chrome and add a break point on Attributes modification, and refresh the page. If the page 'freezes' on refresh then you'll see where the change came from if it was from javascript injection. If nothing happens, then it means that it was an inline style and it was there from the beginning... — dingo_d, May 28 '15 at 11:09
See: http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element — A. Wolff, May 28 '15 at 11:12
I know about priority. About dev tools too. Thanks. I need to know it from js/jquery. — Cypher, May 28 '15 at 11:49

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

4

According to the css() documentation

Get the computed style properties

and

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

Therefore, at the end, whether its from an inline style or a style sheet, it is the computed style.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 28 '15 at 11:00

AmmarCSE

30,079
5
45
53

Thanks. Any other way? – Cypher May 28 '15 at 11:50
@Cypher, any other way? What do you mean. Any way to determine where the style came from? – AmmarCSE May 28 '15 at 11:51
@Cypher, you can do $(this).attr('style').indexOf('padding-right:'+$(this).css('padding-right')) > -1 – AmmarCSE May 28 '15 at 12:07
@Cypher But the above is **so** horrible because it can break **so** easily or might even be wrong if the computed value was not in px for example – AmmarCSE May 28 '15 at 12:08
@Cypher Maybe if you can tell me more detail of why you need to do this so we can work out a cleaner way or better approach – AmmarCSE May 28 '15 at 12:09

score 1 · Answer 2 · answered May 28 '15 at 11:00

1

Try using developer tools in your browser of choice. Right click the div -> "inspect element" (or similar) and look at the CSS for that element. Find your 'padding-right', and it should show you the source for that rule.

answered May 28 '15 at 11:00

Alex McMillan

17,096
12
55
88

This is not what he meant. He wants to check this through jquery. – dsaket May 28 '15 at 11:01
1

@dsaket I'm sorry, I don't understand. OPs question clearly asks how to find the source for a CSS rule, which can't be done with jQuery. – Alex McMillan May 28 '15 at 11:03
@dsaket `Now I need to know where it value comes from` – A. Wolff May 28 '15 at 11:08

score 1 · Answer 3 · answered May 28 '15 at 11:00

1

You can check if your element has inline styles testing "style" property of the DOM element

$("div")[0].style

answered May 28 '15 at 11:00

gmast

192
8

It seems i can start from this. Thanks. – Cypher May 28 '15 at 11:59

Is this inline style or css file style returns with jquery .css()

3 Answers3