在Javascript中獲取元素的transform類屬性

我想使兩個事件取決於菜單的scale屬性。所以這是我div：在Javascript中獲取元素的transform類屬性

<div class="starting-point"> 
    <span class="" style="transform: scaleX(1) scaleY(1); height: 2760.56px; width: 2760.56px; top: -1380.28px; left: -1380.28px;"></span> 
</div>

我怎樣才能獲得transform: scaleX(1) scaleY(1)到一個變量？有時值爲scaleX(0) scaleY(0)，我想根據這些值執行不同的操作。

我分配了dddd類到那個跨度，我試過這個，但是在結果中沒有比例或者有用的東西。

var style = getComputedStyle(document.getElementsByClassName('dddd')[0])

非常感謝。

來源

2016-07-21 TrulyXax

在這裏你去：

var style = getComputedStyle(document.getElementsByClassName('dddd')[0], null); 

console.log(style.getPropertyValue('transform'));

編輯1：

如果你不喜歡要添加的類別，你可以改變你這樣的代碼：

var style = getComputedStyle(document.querySelector('.starting-point span'), null); 

console.log(style.getPropertyValue('transform'));

編輯2：

你可以改變它使用jQuery選擇器以及：

var style = getComputedStyle($('.starting-point span')[0], null); 

console.log(style.getPropertyValue('transform'));

來源

2016-07-21 06:56:14

這就是我在找的，謝謝。但是如果我沒有給這個跨度分配任何類名呢？如何得到它？ div的孩子是不明確的 – TrulyXax

你可以改變你的選擇是這樣的：'document.querySelector（'。starting-point span'）' –

不錯，謝謝很多先生，它幫助 – TrulyXax

既然你加入jQuery的標籤是清潔的，如果你使用它的API

var style = $('.starting-point span').attr('style').split(';')[0];

來源

2016-07-21 07:04:16 Sherlock

您也可以通過使用一個更通用的方法常用表達。

var matrix = $('.selector').css('transform'); 
var values = matrix.match(/-?[\d\.]+/g);

這將讓你的所有轉換屬性，那麼你就可以得到基於索引值的特定屬性。如：

console.log(values[0]);

來源

2016-07-21 07:16:14 Alan

在Javascript中獲取元素的transform類屬性

回答

相關問題