JQuery的常見CSS選擇

我：JQuery的常見CSS選擇

<div class="abc" style="transform : [stuff]"></div> 
which displays in chrome as 
<div class="abc" style="-webkit-transform : [stuff]"></div>

所以我想抓住從這兩[stuff]與單一選擇。

$(".abc").css('whatcomeshere?')

有沒有像我可以在這裏使用的正則表達式？任何其他方法？我想可能會有一個簡單的方法，因爲處理這些事情在JQuery中是司空見慣的。

編輯：澄清

我不是在尋找方法來檢索從變換矩陣的角度或元素。

我只是尋找一個選擇器，它將檢索transform和-webkit-transform樣式$(".abc").css('transform')不適用於兩者。

來源

2013-09-24 user1265125

在關於什麼'的.css（）'可以這樣做：谷歌「jQuery的CSS」和閱讀文檔.. – SmokeyPHP

http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery希望它有用！ – asharajay

重複http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery或http://stackoverflow.com/questions/8601209/fetch -css-value-of-transform-directly-using-jquery或http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery –

編輯截至您的評論下面說這對您的jQuery和Chrome版本不適用。

你總是可以回退到style屬性的元素：

var abc = $(".abc")[0]; 
var transform = abc.style.transform || abc.style.webkitTransform;

Live Example

對我來說，與我的64位Linux，abc.style.transform回報undefined版Chrome瀏覽器（這是有道理的，我只設置供應商的前綴版本），並且返回樣式信息abc.style.webkitTransform。因此，上述將返回第一個不是undefined。

$(".abc").css("transform")應該返回給你，jQuery規範化供應商前綴。

Here's a live example使用此div：

<div class="abc" style="-webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 60% 100%;">foo</div>

而這種代碼：

jQuery(function($) { 
    display("$('.abc').css('transform') = " + $(".abc").css("transform")); 
    display("$('.abc').css('-webkit-transform') = " + $(".abc").css("-webkit-transform")); 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
});

其輸出（在Chrome）：

$('.abc').css('transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0) 

$('.abc').css('-webkit-transform') = matrix(0.9396926207859084, 0.3420201433256687, -0.3420201433256687, 0.9396926207859084, 100, 0)

請注意，我只對前綴版本div，但css給m e關於transform和-webkit-transform的相同信息。

來源

2013-09-24 08:49:56

似乎沒有工作在Chrome Linux 64位上。用'-webkit-transform'選擇給了我矩陣，但'transform'什麼也不做。 – user1265125

@ user1265125：**這很有趣！當你說它不起作用時，你的意思是你的代碼，還是活的examplea bove？你是否使用與上述相同版本的jQuery（v1.10.1）？我也在使用64位Linux，但是使用了一個*稍微過時的Chrome版本（26.0.1410.63）。 –

@ user1265125：我用更直接的方法更新了答案。 –

如果你想有一個特定的供應商名稱，只是明確：

$(".abc").css('-webkit-transform');

在大多數情況下，除非你有專門針對特定供應商的加入不同的功能，一般的CSS屬性應該給你你需要的價值。

來源

2013-09-24 08:51:06 bPratik

當您執行$('.abc').css('transform')時，jQuery處理供應商前綴屬性。

從source code：

cssPrefixes = [ "Webkit", "O", "Moz", "ms" ]; 

// return a css property mapped to a potentially vendor prefixed property 
function vendorPropName(style, name) { 

    // shortcut for names that are not vendor prefixed 
    if (name in style) { 
     return name; 
    } 

    // check for vendor prefixed names 
    var capName = name.charAt(0).toUpperCase() + name.slice(1), 
     origName = name, 
     i = cssPrefixes.length; 

    while (i--) { 
     name = cssPrefixes[ i ] + capName; 
     if (name in style) { 
      return name; 
     } 
    } 

    return origName; 
}

來源

2013-09-24 08:55:53

JQuery的常見CSS選擇

回答

相關問題