How to redirect a webpage using jquery if CSS code changes?

Question

I have created a simple button. Now what I want that, if anyone bring any changes to my css code of #btns id css from <style> .... <.style> tag, like cnages property value, or remove any property, or add any extra property that not in <style> .... <.style> css tag or override css of <style> .... <.style> tag, I mean if anyone touch on css code, then it will be redirect to [https://www.google.com/](https://stackoverflow.com) website. How can I do it using jquery. I think we should write the same css code inside jquery and then compare, where we must give priority the css code which is inside Js code.

Heres my approach. But it redirects without any reason, I mean if both CSS are same, though it redirects.

<!DOCTYPE html>
<html>
<head>
<style id="styleTag">
#btns {
    background: #00c9c9!important;
    border: none!important;
    padding: 12px 16px!important;
    color: #fff!important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var st = `
        #btns {
            background: #00c9c9!important;
            border: none!important;
            padding: 12px 16px!important;
            color: #fff!important;
        }
    `;
    var js = $("#styleTag").text().trim();
    if (st !== js) {
        window.location.href = "https://www.google.com/";
    }
});
</script>
</head>
<body>
<button id="btns"> A Button </button>
</body>
</html>

https://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — SKJ, Aug 20 '23 at 13:41

score 2 · Answer 1 · answered Aug 20 '23 at 17:13

You're almost there! The contents of the <style> tag, however, is...


#btns {
    background: #00c9c9!important;
    border: none!important;
    padding: 12px 16px!important;
    color: #fff!important;
}

... and the contents of the JavaScript variable is...


            #btns {
                background: #00c9c9!important;
                border: none!important;
                padding: 12px 16px!important;
                color: #fff!important;
            }

Notice the difference in indentation. We must remove that indentation if we want to check if they are both the same, so either write the contents of that template string without indentation, or remove it automatically with a regular expression* (but you might also be wanting to detect for changes in indentation in your <style> so I haven't included that method).

So this shouldn't redirect:

$(document).ready(function() {
    var st = `#btns {
    background: #00c9c9!important;
    border: none!important;
    padding: 12px 16px!important;
    color: #fff!important;
}`;
    var js = $("#styleTag").text().trim();
    if (st !== js) {
        window.location.href = "https://www.google.com/";
    }
});

<style id="styleTag">
#btns {
    background: #00c9c9!important;
    border: none!important;
    padding: 12px 16px!important;
    color: #fff!important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="btns"> A Button </button>

And this should redirect:

$(document).ready(function() {
    var st = `#btns {
    background: #00c9c9!important;
    border: none!important;
    padding: 12px 16px!important;
    color: #fff!important;
}`;
    var js = $("#styleTag").text().trim();
    if (st !== js) {
        window.location.href = "https://www.google.com/";
    }
});

<style id="styleTag">
/* Changed style */
#btns {
    background: blue!important;
    border: 100px solid pink!important;
    padding: 0 24px!important;
    color: green!important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="btns"> A Button </button>

^{* before anyone asks, no, regular expressions don't work on programming languages very much, but if you're just matching indentation on code you wrote yourself, they will probably be accurate enough to do the job fine.}

How to redirect a webpage using jquery if CSS code changes?

1 Answers1