How to get CSS override properties for Javascript / jQuery only

I am trying to get a list of CSS properties of an overridden element, for example:

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

When we use this code:

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

I get:

bottom:-10px;

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

empty or null 

because I did not specify / redefine.

The values ​​expected in this example are: top: 10px bottom: auto or null or nothing

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

Again, I only need properties that have been overridden.

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

My goal is only to get the value top,bottomfrom the following element:

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

and css for the item, note that I only specified top:

.giveItSomeTop{
   top:10px;
}

. :

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

: 10px :

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

700px, empty, nothing, null ''

+4
2

, , :

/ javascript, , top = 10px, element.style.top == 10px, , "".

, , , , :

$( 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>
Hide result
+1

, jQuery css(), .

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

CSS .

, , CSS , , , .

, CSS, . /, .

StackOverflow: CSS JavaScript/jQuery

/: CSS JavaScript

null | undefined , .

+1

Source: https://habr.com/ru/post/1671994/


All Articles