How to do something on certain inline CSS with jquery?

Question

I want to change something on my page when some css is added to one element. I tried this:

if ($('.my-slider').css('transform') == 'translate3d(0px, 0px, 0px)') {
   console.log('Logged');
}

This is the picture to prove that this inline style is actually on the page: Image with my page source

jQuery plugin "vertical carousel" generating this style. Code for this plugin is above this code, this isn't a problem. Idea is to change something on every style change (transform values are changing), but for some reason, there is nothing logged in the console here... Can someone help me with this?

Look at the output of `console.log($('.my-slider').css('transform'))`: https://jsfiddle.net/RoryMcCrossan/s9cf8z7n/. It's always converted in to a matrix by the browser, so you need to work with that value, not the `translate3d(...)` string — Rory McCrossan, Apr 18 '20 at 11:10
You can try experimentation with [Mutation Observer](https://stackoverflow.com/a/20683311/7148391) However this will only detect style changes in the style attribute. — Rainbow, Apr 18 '20 at 11:42
You are right Rory, this was one of problems. It's working with this code: if ($('.my-slider').css('transform') == 'matrix(1, 0, 0, 1, 0, 0)') { console.log('Logged'); } But only when you add the transform in css. Unfortunately, this is still not working on my page, because this style is changing dinamically by the plugin I guess... — HSNeandertalis, Apr 18 '20 at 12:03
@ZohirSalak Actually, it work! I can get info about changes with this and' it's working. Thank you for help! — HSNeandertalis, Apr 18 '20 at 13:20

score 0 · Answer 1 · 2020-04-18T11:28:13.207

0

I think that you should use indexof function.

if ($('.my-slider').attr('style') && $('.my-slider').attr('style').indexOf('translate3d(0px, 0px, 0px)') >= 0) {
   console.log('Logged');
}

edited Apr 18 '20 at 11:28

answered Apr 18 '20 at 11:15

This is assuming that the CSS is applied using an inline `style` attribute, which it shouldn't be as that's bad practice – Rory McCrossan Apr 18 '20 at 11:16
Unfortunately no... https://prnt.sc/s1qjhy This is the plugin which generating this code, if it can help: https://github.com/ganlanyuan/tiny-slider#install – HSNeandertalis Apr 18 '20 at 11:19
please check the code. Sometimes css function is not good to get the style. And currently you are using a plugin. so In this case, I think that we can not get the transform attr using css. – Apr 18 '20 at 11:30
Yes @HeZhiYong, unfortunately, it looks like this is impossible to do... I can't use this information to select my element... – HSNeandertalis Apr 18 '20 at 12:08

score 0 · Accepted Answer · answered Apr 18 '20 at 13:22

With the help of you guys, it's solved! I will provide below working version of code, in case someone else need it:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        if ((target.style.transform) == 'translate3d(0px, 0px, 0px)') {
            console.log('logged');
        }
    });

var target = document.querySelector('.my-slider');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

How to do something on certain inline CSS with jquery?

2 Answers2