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

2023年10月27日 196次阅读

我试图获取被覆盖的元素的CSS属性列表,例如：

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

当我们使用这段代码时：

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

我获得：

bottom:-10px;

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

empty or null

因为我没有指定/覆盖.

此示例中预期的值：
上：10px
bottom：auto或null或nothing

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

同样,我只想要被覆盖的属性.

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

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

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

和元素的CSS,请注意我只指定了顶部：

.giveItSomeTop{
   top:10px;
}

现在我想得到最高值和最低值.如果我做：

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

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

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

我得到700px,当我应该空,没有,null或”

最佳答案 你到达那里真的很棘手,我这里唯一的建议是：

使用原生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>
点赞