jQuery/JavaScript的CSS（「寬度」）/檢查樣式是在CSS中定義？

我有一個樣式表，它定義圖像的默認寬度。當我用jQuery width()讀取圖像寬度樣式時，它會返回正確的寬度。當我撥打css("width")時，它也會返回相同的寬度。但是如果樣式表中沒有定義寬度，函數css("width")也會返回計算的width()值，但不會說undefined或auto或類似的東西。jQuery/JavaScript的CSS（「寬度」）/檢查樣式是在CSS中定義？

任何想法如何我可以找出風格是否定義在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; 
}

來源

2010-11-05 i3rutus

有趣的問題。我想知道你爲什麼需要這個？ – Stefanvds 2010-11-05 11:28:43

我認爲這是HTML規範中定義的行爲：如果未指定，則元素的width屬性將設置爲實際元素寬度。整蠱，有興趣看看是否有任何解決方案 – 2010-11-05 11:29:49

我有一個CMS有嚴格的圖像和文字大小的定義。但是，圖像大小是在css中爲CMS使用的每個特殊模板中的每個圖像定義的。如果管理員滾過圖像，我想顯示在CSS中定義的寬度和高度，以便用戶知道如何裁剪/縮放圖像。 – i3rutus 2010-11-05 11:34:51

我有一個解決方法的想法，可能工作。

.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 */

找出圖像是否具有設定寬度：

所有其它樣式表之前定義一個名爲default_width類

克隆它的jQuery：element = $("#img").clone()

給出克隆元素default_width class：element.addClass("default_width")

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

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

來源

2010-11-05 11:39:12

，完美謝謝。 – i3rutus 2010-11-05 11:47:20

嗯......有趣的黑客！不過，我認爲你必須在原地修改元素，以確保所有相同的規則適用於它。沒關係，你可以'addClass'，度量並立即'removeClass'而不強制重畫。不幸的是，類選擇器比元素選擇器具有更高的特異性，所以如果寬度是由元素選擇器設置的，這將覆蓋它並決定沒有設置寬度。由於沒有'！unimportant'聲明，所以無法真正看到任何解決方法...... – bobince 2010-11-05 12:14:30

@bobince關於如何使用它的好處！更高的特異性是一個缺點，是正確的。有機會在手邊的情況下沒有問題，因爲所有'img'都不會爲全局設置'width'，但仍然是。但是我看不到解決這個問題的辦法，但是，使用'default_width'類（例如縮小它以匹配特定屬性）只會使* *更具體。 – 2010-11-05 12:21:00

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

來源

2010-11-05 11:29:14

只在FF3.6和IE8中測試。但它應該工作。 – 2010-11-05 11:29:55

我不這麼認爲：如果'style'屬性沒有設置，這將返回一個空字符串，但它不會識別樣式表中任意類中設置的設置。我很高興能夠糾正，但我很肯定這個 – 2010-11-05 11:30:23

你是對的:) – 2010-11-05 11:32:34

如果定義寬度，可以檢查元素的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;

，你應該只匹配寬度不邊框寬度。

來源

2010-11-05 11:31:35 jerjer

這不適用於在類中設置的屬性，但是，它會嗎？ – 2010-11-05 11:32:26

你就在那裏佩卡！它不會在CSS類定義的寬度上工作，這隻會工作在內聯CSS。 – jerjer 2010-11-05 11:35:49

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

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

如果你真的想要去解決它，你可以遍歷document.styleSheets，閱讀他們的每一個聲明，讓選擇出來，查詢它，看看你的目標元素是否匹配，然後看它是否含有width規則。然而，這樣做會很慢並且一點也不好玩，特別是IE的styleSheet DOM與其他瀏覽器不同。（它仍然不會應付僞元素和僞類，如:hover。）

來源

2010-11-05 11:33:02 bobince

+1 - 通過jQuery 1.4.3 CSS重寫，實際上應該已經暴露了（繞過鉤子），因爲所有的代碼都在那裏。 – 2010-11-05 11:52:53

jQuery/JavaScript的CSS（「寬度」）/檢查樣式是在CSS中定義？

回答

相關問題