如何使用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>