4

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

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

当我们使用这段代码时：

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

我得到：

bottom:-10px;

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

empty or null

因为我没有指定/覆盖。

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

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

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

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

我的目标只是top,bottom从以下元素中获取价值：

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

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

.giveItSomeTop{
   top:10px;
}

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

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

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

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

我700px应该得到empty, nothing,null或 ''

4

2 回答 2

1

你到达那里是一件非常棘手的事情，我唯一的建议是：

用原生javascript设置top/bottom，所以如果设置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>

于 2017-03-10T13:26:32.003 回答
1

不幸的是，您没有按照css()预期使用 jQuery 方法。

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

获取匹配元素集中第一个元素的计算样式属性值，或为每个匹配元素设置一个或多个 CSS 属性。

这意味着，它不关心 CSS 文件已应用于该元素的内容，它只会查找您要求它在该元素上查找的内容。

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

StackOverflow 上有这样一个工具的答案：​​Parsing CSS in JavaScript / jQuery

和/或：将 CSS 文本转换为 JavaScript 对象

从这里您将获得一个null| undefined对于不存在的对象属性。

于 2017-03-10T17:42:15.623 回答