如何进入 Javascript / jQuery 仅 CSS 覆盖属性

Question

我正在尝试获取被覆盖的元素的 CSS 属性列表，例如：

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

当我们使用此代码时：

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

我获得：

bottom:-10px;

如果我使用 get computed 或 jquery.css 我会得到相同的结果，但实际上我想获得：

empty or null

因为我没有指定/覆盖。

此示例中的预期值：顶部：10px 底部：自动或空或无

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

同样，我只想要被覆盖的属性。

=====================编辑================== ====

我的objective只是从下面的元素中获取值top,bottom：

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

和元素的 css，注意我只指定了 top:

.giveItSomeTop{
   top:10px;
}

现在我想获得最高值和最低值。如果我这样做：

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

结果是：10px 但是当我这样做时：

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

当我应该得到 empty、nothing、null 或 ''

时，我得到了 700px

Answer 1

你到达那里真是一件棘手的事情，我在这里唯一的建议是：

使用原生设置顶部/底部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>

Answer 2

很遗憾，您没有按预期使用 jQuery css() 方法。

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.

这意味着，它不关心 CSS 文件对这个元素应用了什么，它只会查找您要求它查找的内容 on元素。

您需要做的是编写一个 CSS 文件解析器，然后从中查询。但这是您需要实现的另一个 tool/library。

Whosebug 上有此类工具的答案：Parsing CSS in JavaScript / jQuery

和/或：Convert CSS text to JavaScript object

从这里您将得到 null|undefined 表示不存在的对象属性。

如何进入 Javascript / jQuery 仅 CSS 覆盖属性

How to get in Javascript / jQuery only CSS override properties

css

jquery

computed-style

getcomputedstyle