Javascript add universal selector CSS rule via click on element - OR update universal selector rule to have class name

Question

Debugging a UI on mobile devices is made easier if we can highlight the elements which cause horizontal scrolling - this can be done easily enough with the following line of CSS, which uses the universal selector:

* { border: 1px solid #f00 !important; }

Works nice, but to turn it on and off we need to recompile sass, or step outside of our defined process... or find a nice JS solution.

We have a handy BootStrap breakpoint viewer and it makes sense to add a click action to this to apply the CSS rule - On / Off, so we can save some time and give a good UX to the UI developers..

So, first goes are not working well, we can't use addClass and then removeClass as the selector is not named..

Also, we've tried a few variants of the following to apply to css rule globally, but they are not working yet:

// click to add debug borders ##
jQuery('#bs_helper').click(function(e){

    // console.log( 'Clicked BS..' );
    jQuery( document ).find("*").css( "border", "1px solid #f00 !important" );

});

Also, did not work with:

jQuery( "*" ).css( "border", "1px solid #f00 !important" );

Any hints? We need a single click to add and another to remove the rule.

Thanks!

UPDATE - this works, but perhaps there is a better way?

var $bs_helper_css = false;

// click to add debug borders ##
jQuery('#bs_helper').click(function(e){

    if( ! $bs_helper_css ) {

        var html = "<style id='bs_helper_css'>* { border: 1px solid #f00 !important; }</style>";
        console.log( 'Add: '+html );
        jQuery('body').append(html); 

        // tracker ##
        $bs_helper_css = true;

    } else {

        console.log( 'Remove CSS' );
        jQuery('#bs_helper_css').remove();

        // tracker ##
        $bs_helper_css = false;

    }

    return true;

});

freedomn-m · Accepted Answer · 2020-08-27T12:03:06.640

1

You can add/remove a class on body

body.debug * { border: 1px dashed pink; }

for a bonus, you can also exclude items (such as your debug button) if needed:

$("#debug").click(function() { $("body").toggleClass("debug"); });

body.debug :not(.nodebug) { border: 1px dashed pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>basic element</div>
<div><div>nested element</div></div>
<hr class='nodebug' />
<button type='button' id='debug' class='nodebug'>debug</button>
</body>

edited Aug 27 '20 at 12:03

answered Aug 27 '20 at 09:58

freedomn-m

27,664
8
35
57

Excellent! What is this syntax? "... => ..." as in $("#debug").click(() => $("body").toggleClass("debug")); - looks like pseudo code, but works without error? – Q Studio Aug 27 '20 at 10:08
1

It's ES6, same as `.click(function() { $("body")...` only you can't use `this` inside `=>`. Doesn't work in IE11 but works in modern browsers – freedomn-m Aug 27 '20 at 10:20
In this case, it's a debugging tool, so we probably need it to work better in IE than anywhere else ;) – Q Studio Aug 27 '20 at 11:13
1

Updated to pre-ES6 anonymous function. Worth a read (not a duplicate of the question, just for this syntax) https://stackoverflow.com/a/24900924/2181514 – freedomn-m Aug 27 '20 at 12:05

Javascript add universal selector CSS rule via click on element - OR update universal selector rule to have class name

1 Answers1