jQuery / Javascript css（“width”）/檢查樣式是否在css中定義？

Question

我有一個樣式表定義圖像的默認寬度。 當我用jQuery width()讀取圖像寬度樣式時，它返回正確的寬度。 當我調用css("width")時，它也返回相同的寬度。 但是如果樣式表中沒有定義寬度，函數css("width")也將返回計算出的width()值，但不會說undefined或auto或類似的東西。

我有什么想法可以找出CSS代碼中是否定義了樣式？

解決方案適用於跨瀏覽器。 感謝大家的幫助：

$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");

.default_width_check {
    width: 12345;
}

Answer 1

我有一個解決方法想法可能會奏效。

在所有其他樣式表之前定義名為default_width的類：

.default_width { width: 1787px }  
/* An arbitrary value unlikely to be an image's width, but not too large
   in case the browser reserves memory for it */

找出圖像是否設置了寬度：

• 在jQuery中克隆它： element = $("#img").clone()

• 給克隆元素default_width類： element.addClass("default_width")

• 如果它的寬度是1787px，它沒有寬度設置 - 或者，當然，本身是1787px寬，這是這種方法不起作用的唯一情況。

我不完全確定這是否有效，但可能會有效。 編輯 ：正如@bobince在注釋中指出的那樣，您需要將元素插入到DOM中，以便正確應用所有類，以便進行正確的寬度計算。

Answer 2

不，jQuery的css()函數所依賴的getComputedStyle()方法無法區分從auto與顯式寬度計算的寬度。 您無法判斷樣式表中是否設置了某些內容，僅來自直接內聯style="width: ..." （它反映在元素的.style.width屬性中）。

currentStyle工作方式不同，會給你auto ，但這是一個非標准的IE擴展。

如果你真的想要解決它，你可以迭代document.styleSheets ，讀取它們的每個聲明，取出選擇器並查詢它以查看你的目標元素是否匹配，然后查看它是否包含width規則。 然而，這將是緩慢而且沒有任何樂趣，特別是因為IE的styleSheet DOM與其他瀏覽器不同。 （它仍然無法處理偽元素和偽類，如:hover 。）

Answer 3

您可以使用image.style.width （圖像應該是您的元素）。 如果未在CSS中定義，則返回空字符串。

Answer 4

如果定義了寬度，您可以檢查元素的style.cssText;

<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />

var pic = document.getElementById('pic');
alert(pic.style.cssText);

但請注意以下樣式

border-width: 10px;
width: 10px;

你應該只匹配寬度而不是邊框​​寬度。