在JavaScript中更改瀏覽器特定的CSS3（前綴）屬性

所以我試圖動態地改變與JavaScript的div的風格，這通常沒什麼大不了，我試圖改變一些CSS3屬性有一個前綴即減號（ - ）的名字......當然，這意味着一些在javascript東西完全...在JavaScript中更改瀏覽器特定的CSS3（前綴）屬性

所以我有這個事情在我的javascript：

r += 1; 
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

和我的div風格屬性如下所示：

transform: rotate(30deg); 
-ms-transform: rotate(30deg); /* IE 9 */ 
-webkit-transform: rotate(50deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */

以便JavaScript可以正常工作以更改「變形」屬性，但是如何更改其餘部分？因爲做這樣的事情是行不通的：？

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

因爲JavaScript的讀取「 - 」作爲語法錯誤:(

想法

來源

2012-02-01 Nick

取而代之的-，使下一個字母大寫：style.MozTransform
（就像style.backgroundColor）

注意，IE錯誤地使用msTransform以小寫m 。

來源

2012-02-01 22:39:56 SLaks

其實我相信它是'msTransform'。 – 2012-02-01 22:45:10

那麼考慮到'document.body.style.MsTransform'是未定義的，'document.body.style.msTransform'是一個空字符串，我不得不說我就在這裏。 – 2012-02-01 22:48:28

我錯了;你是對的，但只適用於IE。 – SLaks 2012-02-01 22:49:34

在JavaScript中，您可以通過兩種方法訪問對象屬性：點表示法或數組表示法。尤其是當你有特殊字符在屬性名，使用數組表示法：

document.getElementById('someDiv').style['-ms-transform'] = "rotate(" + r + "deg)";

然後，你需要確保該財產是正確的瀏覽器，我強烈建議您使用JavaScript像jQuery，MooTools的LIB等等，如果你瓦納贏得一些時間，防止有些無奈地說網絡developpers之前這些偉大的工具，有...

來源

2012-02-01 22:41:07 dmidz

實際上，這是行不通的。 – SLaks 2012-02-01 22:47:08

@SLaks爲什麼不呢？ – 2012-02-01 22:49:15

因爲Javascript屬性被稱爲'msTransform'。這將創建一個瀏覽器將忽略的新屬性。 – SLaks 2012-02-01 22:50:03

使用jQuery，只是改變類

$("p").removeClass("myClass noClass").addClass("yourClass");

來源

2012-02-01 22:41:07 atrueresistance

我希望我能這兩次！ lulz的 – skybondsor 2012-02-01 22:58:46

... – atrueresistance 2012-02-02 01:12:31

如果你已經有了風格在線您可以忽略前綴並更改度數。元素的style.cssText是可讀寫的。

var sty=document.getElementById('someDiv').style; 

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');

來源

2012-02-02 00:17:35 kennebec

在JavaScript中更改瀏覽器特定的CSS3（前綴）屬性

回答

相關問題