How to get in Javascript / jQuery only CSS override properties

Question

I am trying to obtain the list of CSS properties of an element that are overridden, example:

.div{
  position:absolute;
  top:10px;
}

When we use this code:

jQuery('.div').css('bottom');

I obtain:

bottom:-10px;

If I use get computed or jquery.css I will get the same result, but in fact I want to obtain:

empty or null

because I didn't specify / overridden.

Values expected in this example: top: 10px bottom: auto or null or nothing

https://codepen.io/anon/pen/dvvdVv

Again, I only wanted the properties that were overridden.

===================== EDIT ======================

My objective is only to get the value top,bottom from the following element:

<div id='box' class='giveItSomeTop' style="top:10px"></div>

and the css for the element, notice that I have only specified top:

.giveItSomeTop{
   top:10px;
}

Now I want to get the top value and the bottom value. If I do:

$('#box').css('top');

The result is: 10px but when I do:

$('#box').css('bottom');

I get 700px when I should get empty, nothing, null or ''

You can't.. When you query the .css(x) it is not trying to parse the css file... THAT is what you're looking for. If you take a look at the documenation, it says Get the value of a computed style property : api.jquery.com/css you will need to write a CSS file parser. — Pogrindis
– Pogrindis, Commented Mar 10, 2017 at 17:34
Thought so. That was exactly what we did. But could be a better way :( — Ignacio Correia
– Ignacio Correia, Commented Mar 10, 2017 at 18:46

Community · Accepted Answer · 2017-05-23 12:25:16Z

1

Unfortunately you are not using the jQuery css() method how it is intended.

https://api.jquery.com/css/

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

This means, it does not care what the CSS file has applied to this element, it will only look for what you have asked it to look for on the element.

What you will need to do it write a CSS file parser, and then query from that.. But it's another tool/library you will need to implement.

And there are answers for such a tool on StackOverflow : Parsing CSS in JavaScript / jQuery

And / Or : Convert CSS text to JavaScript object

From here you will be given a null|undefined for object properties which do not exist.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 10, 2017 at 17:42

Pogrindis

8,3365 gold badges34 silver badges44 bronze badges

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

Comments

Sven Liebig · Accepted Answer · 2017-03-10 13:26:32Z

1

Its a really tricky thing you got there, my only suggestions here is:

Set the top / bottom with native javascript, so if you set top = 10px, you will get element.style.top == 10px, if you did not set this property, you will get "".

I added an example here, not the best solution but maybe it helps:

$( document ).ready(function() {
  var box = document.getElementById("box");
  
  // Set it like this
  var top = box.style.top = "20px";
  var bottom = box.style.bottom;
  
  // And you get 20px
  $('#top').text(top);
  
  // If unset you get ""
  $('#bottom').text(bottom);
  
  console.log(top);
});

#box {
  position: absolute;
  width:30px;
  height:30px;
  background-color:red;
  top:10px;
}

p {
  position:relative;
  top:40px;
  font-size:12px;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='box'></div>
<p id='top'></p>
<p id='bottom'></p>

answered Mar 10, 2017 at 13:26

Sven Liebig

8488 silver badges20 bronze badges

1 Comment

Ignacio Correia Over a year ago

I have edited the question. You answer does not work because we do not control how the CSS is setup. We have 5 css files that override the elements on this project.

Collectives™ on Stack Overflow

How to get in Javascript / jQuery only CSS override properties

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related