如何使用jquery檢查元素是否具有轉換屬性？

Question

我想檢查custom-class何時具有樣式transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

我已經檢查過 stackoverflow 演示，但在我的情況下它僅適用於opacity ，但我無法檢查transform css 屬性。

 if( $('.custom-class').css('opacity') == '1' ) { console.log('It opacity checked'); } else { console.log('It opacity unchecked '); } if( $('.custom-class').css('transform') == 'translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1)' ) { console.log('It transform checked'); } else { console.log('It transform unchecked'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-class" style="opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);"></div>

Answer 1

jQuery .css方法（作為 getter，而不是 setter）在內部使用getComputedStyle()

來自 MDN（強調我的）：

獲取匹配元素集中第一個元素的計算樣式屬性的值，或者為每個匹配元素設置一個或多個 CSS 屬性。

所以$('.custom-class').css('transform')實際上是self.getComputedStyle(document.querySelector('.custom-class')).getPropertyValue('transform')

出於性能原因，這是一個matrix值。 您的變換是非平移恆等變換（不縮放、傾斜或旋轉且不平移），即matrix(1, 0, 0, 1, 0, 0)的矩陣值

如果你想擁有樣式的真正價值，你需要使用 VanillaJS document.querySelector('.custom-class').style.transform代替

或者只是與矩陣值進行比較

// ...
if( $('.custom-class').css('transform') == 'matrix(1, 0, 0, 1, 0, 0)' ) {
// ...

 if( $('.custom-class').css('opacity') == '1' ) { console.log('It opacity checked'); } else { console.log('It opacity unchecked '); } console.log(self.getComputedStyle(document.querySelector('.custom-class')).getPropertyValue('transform')) console.log($('.custom-class').css('transform')) console.log(document.querySelector('.custom-class').style.transform) if( $('.custom-class').css('transform') == 'matrix(1, 0, 0, 1, 0, 0)' ) { console.log('It transform checked'); } else { console.log('It transform unchecked'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-class" style="opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);"></div>