Get CSS styles of an element

Question

I have an element that has the following styles:

<div id="myElement" style="opacity: 0.9; cursor: auto; visibility: visible;"></div>

I want to make sure it always (setInterval?) has these styles, no more no less, NO changes at all. I wonder if its possible to retrive all styles of an element (inline CSS or external) and compare compare them to make sure there were not changes?

An element can't have *only* those styles. If nothing else, it will have lots received through the cascade from the browser's internal stylesheet. — Quentin, May 08 '13 at 15:35
CSS doesn't change itself. Why not stop the changes at the source? — harpo, May 08 '13 at 15:35
Yes, you can use SetInterval, which checks for that string in the style attribute, and reset it if something has changed — karthikr, May 08 '13 at 15:35
@harpo, the OP is trying to detect if the user manually changes things in the console. [know this from another post] — epascarello, May 08 '13 at 15:37
The objective here is to make sure the user doesn't override the CSS and hide the element somehow (display:none, position:absolute etc..) — eozzy, May 08 '13 at 15:37
@karthikr — From the question "all styles of an element (inline CSS or external)" so that wouldn't be sufficient. — Quentin, May 08 '13 at 15:37
@Nimbuz — You can't. It's the user's browser. They can do whatever they like in it. — Quentin, May 08 '13 at 15:38
possible duplicate of [Can jQuery get all CSS styles associated with an element?](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) — epascarello, May 08 '13 at 15:40
@curt Aim is to NOT allow the user to hide the element by overriding the CSS (display none etc..) — eozzy, May 08 '13 at 15:43
Also bear in mind that the user could simply disable javascript. Relying on client side to be bullet proof to user tampering is asking a bit much. — Maloric, May 08 '13 at 15:53
Not bullet proof, but something to make it difficult for cheaters. — eozzy, May 08 '13 at 15:55

Maloric · Accepted Answer · 2013-05-08T16:03:10.333

1

For a single element I would not imagine that the performance difference between setting it and checking it first is significant. You might as well just do something like this:

$(document).ready(function(){
    var t = setInterval(function(){
        $('#myElement').attr('style', 'opacity: 0.9; cursor: auto; visibility: visible;');
    }, 1000);
}

I realise that you would normally set the styles using $('#myElement').css, but as you want to ensure no new styles were added, setting the style attribute should achieve what you want. Unfortunately it doesn't account for changes to the stylesheet or style blocks elsewhere on the page. To do this you would have to make your style attribute a bit more comprehensive and include "!important" after each value.

Out of interest, why do you need to do this? It sounds like there might be a better solution to the problem.

Edit: If you want to stop the user using clearInterval, instead of

var t = setInterval(...);

Just use

setInterval(...);

As clearInterval requires the reference to the interval in order to clear it (correct me if I'm wrong here). By not creating that reference the interval is still executed but not clearable.

Ultimately though I don't think there will be a fool proof method to achieve this. It should however, prevent all but the most determined users with from hiding whatever it is you want them to see.

Edit 2: If you just want to check the CSS it is possible but a bit of a pain as you would have to check each property in turn. Using jQuery's css function you could do something like this:

$(document).ready(function(){
    setInterval(function(){
        var el = $('#myElement');
        var tampered = false;
        if (el.css('display') != 'block') tampered = true;
        if (el.css('visibility') != 'visible') tampered = true;
        if (el.css('position') != 'static') tampered = true;
        ....
        if (tampered){
            // Do your thing
        }
    }, 1000);
}

edited May 08 '13 at 16:03

answered May 08 '13 at 15:39

Maloric

5,525
3
31
46

The objective here is to make sure the user doesn't override the CSS and hide the element somehow (display:none, position:absolute etc..) – eozzy May 08 '13 at 15:40
setInterval() will not work because user can use clearInterval()? – DmitryK May 08 '13 at 15:42
And setting `style` won't work because the user can inject a stylesheet that adjusts different styles or uses `!important`. – Quentin May 08 '13 at 15:43
Even if the user uses !important in an injected stylesheet, adding !important to the inline styles will always give them precedent. – Maloric May 08 '13 at 15:46
I'm not looking to play cat and mouse, if changes detected, I'll crash the browser :) http://stackoverflow.com/questions/10965987/how-do-you-force-chrome-pages-tabs-to-crash-using-javascript – eozzy May 08 '13 at 15:47
Instead of setting these CSS properties, can't I detect changes? Cause the CSS is already set, I just need to detect changes and do X – eozzy May 08 '13 at 15:56
Updated my answer to show how to just read the css that has been applied. – Maloric May 08 '13 at 16:05
@Maloric — Still not sufficient. There are many, many properties that could be added that would remove the element from sight. – Quentin May 08 '13 at 16:10
@Quentin I'm open to better suggestions. As I said, I don't believe there is a bullet proof method. For each one of those properties, add another line. I've listed three of the major ones. You could also try width, height, opacity to name a few. – Maloric May 08 '13 at 16:13
I'm using a different approach. I'm checking if the element is within the viewport, and is visible, if not .. do X – eozzy May 08 '13 at 18:44

Get CSS styles of an element

1 Answers1