2009-10-22 30 views
1

jQuery的跨瀏覽器支持是驚人的。 但是我想知道下面的腳本是否可以在任何瀏覽器中工作。是否有任何getter jQuerys CSS翻譯?

$("#block1").css('background','blue'); 
$("#block2").css('backgroundColor', '#0000ff'); 
$("#block3").css('background-color', 'rgb(0, 0, 255)'); 

if ($("#block1").css('background-color') == $("#block2").css('background-color') && 
    $("#block1").css('background-color') == $("#block3").css('background-color')) 
{ 
    alert ('same color : ' + $("#block1").css('background')); 
} 

Demo

正如你看到這3種不同的setter方法做同樣的事情。將背景顏色更改爲藍色。

似乎有翻譯方法的設置方法.css方法。

我很好奇是否還有getter方法的任何翻譯。

+3

如果你可以自己檢查,會更好。 – rahul 2009-10-22 13:15:46

+1

是的哥們。爲什麼不自己檢查它 – 2009-10-22 13:28:41

回答

1

由於某種原因,它不適用於我的谷歌瀏覽器(3.0.195.27 - 窗口),但在Firefox上工作。 希望它有幫助。

編輯: 進一步測試顯示有趣的結果。

一)似乎鉻轉換#0000FF爲rgb(0,0,255),但以「藍色」

B),Firefox會顯示非常diferent結果取決於你問的財產同樣不適用對於。 Specificaly爲background-color屬性將其轉換顏色的格式RGB(0,0,255)

只是看:

chrome, 'background' property http://img237.imageshack.us/img237/7223/chrome1.png chrome, 'background-color' property http://img43.imageshack.us/img43/7383/chrome2.png chrome, 'backgroundColor' property http://img98.imageshack.us/img98/1127/chrome3.png firefox, 'background' property http://img40.imageshack.us/img40/2374/firefox1b.png firefox, 'background-color' property http://img40.imageshack.us/img40/3706/firefox2h.png firefox, 'backgroundColor' property http://img94.imageshack.us/img94/9139/firefox3.png

隨意test它自己。

+0

thx! 我猜翻譯只能通過瀏覽器而不能通過jQuery完成。 – jantimon 2009-10-26 23:40:19

+0

從其他答案我認爲結論是,jQuery只做一些翻譯(如已提到的不透明)。 要真正知道翻譯是否爲特定屬性完成的唯一方法是測試或檢查源文件。 – 2009-10-27 15:15:45

0

您需要設置backgroundColor而不是background-color,就像您使用標準JS一樣 - 即element.style.backgroundColor = '#FFFFFF';

+0

jQuery處理這種差異 – 2009-10-22 13:20:07

+0

不知道!原來,舊版本沒有管理好,所以也許取決於你的版本,你可能會這樣做:) – Seb 2009-10-22 13:40:58

3

這跟jquery沒有什麼關係......瀏覽器的css支持完全獨立於jQuery支持跨瀏覽器API的能力(你是對的,太棒了;-))。我討厭這樣說,但唯一能找到的方法是在您定位的不同瀏覽器中嘗試特定的代碼段。

+2

它可能與jQuery有關 - 我認爲OP要求的是'是否Jquery做CSS的任何翻譯屬性/值,基於主機瀏覽器?' – belugabob 2009-10-22 13:20:17

+1

遵循belugabob,是的,jQuery首先檢查瀏覽器。這在設置不透明度時很明顯。這將導致我爲FF,IE等不同的CSS樣式。 – peirix 2009-10-22 13:24:16

+0

哇,老實說,我沒有意識到,jQuery做了這個透明的翻譯爲CSS ...真棒:-) – 2009-10-22 13:26:43

0

設置CSS屬性的位置是瀏覽器問題。

jQuery的「正常化」只有在讀取屬性

0

jQuery是開源的,雖然該代碼不是很容易閱讀,一點點努力和使用螢火蟲通過代碼走,你可以找到您正在尋找的信息。讓我來幫助你使用jquery-1.3.2。

用於設置一個樣式看第1037行。正如你所看到的,jQuery只對IE不透明有一個特殊的處理。它還使用正則表達式將樣式名稱轉換爲駱駝大小寫符號。所以,background-color實際上會被翻譯成backgroundColor。另請參閱道具功能(698行)。當將數字設置爲css屬性並且單位尚未定義時,將使用「px」。有關從此模式中排除的屬性,請參閱排除方法(第612行)。

對於讀取屬性,請參閱行781中的curCSS函數。再次opacity是特殊處理的。另外,處理級聯樣式有一些相當複雜的代碼。請參閱discussion,它實際上是從jQuery代碼引用的。 IE再次需要特殊處理。

當閱讀backgroundColorbackground-color的樣式時,也有一個細微的差異。要明白髮生了什麼,你可以運行下面的代碼:

element = document.getElementById('block1'); 
alert(element.style['backgroundColor']); 
alert(element.style['background-color']); 
alert(document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')); 

讀取時,jQuery的不所有樣式轉換爲駱駝。如果定義了style[name],則直接返回它。否則它使用getComputedStyle。級聯樣式的事情更復雜。

+0

顯然背景顏色並沒有在所有瀏覽器上翻譯。 (請參閱我的文章) – 2009-10-26 10:19:24

+0

jQuery只翻譯屬性的名稱(將其轉換爲駱駝大小寫)而不是值。然後,它依賴於瀏覽器如何處理寫入的值以及回讀時要返回的內容。 – kgiannakakis 2009-10-26 10:55:16

+0

如果他翻譯從背景顏色獲得的屬性的名稱和backgroundColor應該返回相同的值,對吧?並沒有發生...... – 2009-10-26 13:02:00