Question

我试图做一些非常简单的事情，当我开始调试代码时，直到我看到它才知道出了什么问题。我无法相信这个简单的功能不适用于Firefox或IE 11，但适用于Chrome。

想象一下，我得到了这个带有2个css类的div元素。

<div id="box" class="class1 class2"></div>

class2有border-top属性。

.class2 {
   border-top: 1px solid #626262;
}

现在我想看看这个盒子div是否有任何border-top属性。

您首先想到的是：

$("#box").css("border-top")

右？这会返回border-top属性（如果有的话）。好吧，这适用于Chrome，并返回border-top属性...在Firefox和IE 11中返回一个空字符串，这怎么可能呢？

对于出了什么问题的任何想法？或者以其他方式在所有浏览器上获取它？

提前致谢。

编辑：结束做一些对我有用的事情，与此无关。我只关注边界＆＃39; width和i应用宽度不同于0px的值。更有意义，因为我有其他默认边框样式无缘无故地使用＆＃34; 0px none＃000000＆＃34;。

Answer 1

根据css的jQuery文档：

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.

css() method

所以基本上，你必须使用原始方法查找每个浏览器对许多属性使用的内容....或者你可以像A. Wolff建议的那样做，而只是检查课程。

Answer 2

您是否尝试过搜索更原子的CSS属性（即非零“border-top-width”而不是“border-top”）？

Answer 3

您应该能够获得像border-top-width这样的单个值属性的计算值，但是对于像border-top这样的多值属性，浏览器存在差异，包括jquery以及DOM API：

＆＃13;

for (var properties = ['border-top', 'border-top-width'], i = 0, l = properties.length; i < l; i++) {
  console.log(properties[i] + ': ' + $('#box').css(properties[i]));
  console.log(properties[i] + ': ' + window.getComputedStyle(document.getElementById('box')).getPropertyValue(properties[i]));
  }

＆＃13;

.class2 {
   border-top: 1px solid #626262;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="class1 class2">This is a test.</div>

＆＃13;

Firefox和IE 11上jquery css函数的奇怪行为

3 个答案: