jQuery CSS功能在Firefox和IE 11上的怪異行為

Question

我試圖做一些非常簡單的事情，當我開始調試代碼時，直到看到它，我才知道出了什么問題。 我簡直不敢相信，這個簡單的功能在Firefox或IE 11上將不起作用，而在Chrome上將起作用。

想象一下，我在這個div元素中添加了2個CSS類。

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

其中class2具有border-top屬性。

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

現在，我想看看此box div是否具有任何border-top屬性。

您認為的第一件事是：

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

對？ 這將返回border-top屬性（如果有）。 好吧，這在Chrome上有效，並返回border-top屬性...在Firefox和IE 11中返回空字符串，這怎么可能？

有什么問題的主意嗎？ 或以其他方式在所有瀏覽器上獲取它？

提前致謝。

編輯：最終做了一些對我有用的事情，與此無關。 我只是注意邊框的寬度，我將寬度的值應用於0px以外的值。 更有道理，因為我有其他默認邊框樣式無緣無故地帶有“ 0px none＃000000”。

Answer 1

根據jQuery的CSS文檔：

Retrieval of shorthand CSS properties (eg, 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（）方法

因此，基本上，您必須使用原始方法來查找每種瀏覽器用於許多屬性的內容。...或者您可以按照A. Wolff的建議進行操作，而只需檢查類即可。

Answer 2

您是否嘗試過搜索更原子的CSS屬性（即，非零的“ border-top-width”而不是“ border-top”）？

Answer 3

您應該能夠獲得單值屬性（例如border-top-width的計算值，但是對於多值屬性（例如border-top ，瀏覽器，jquery和DOM API都存在差異：

 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])); } 

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

 <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>