Jquery Javascript通过单击元素添加通用选择器CSS规则，或者更新通用选择器规则以获得类名

如果我们可以突出显示导致水平滚动的元素，那么在移动设备上调试UI会变得更容易-这可以通过使用通用选择器的以下CSS行轻松完成：

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

工作很好，但要打开和关闭它，我们需要重新编译sass，或者在定义的过程之外进行操作。。。或者找到一个好的JS解决方案

我们有一个方便的引导断点查看器，在其中添加一个单击操作以应用CSS规则-开/关是有意义的，因此我们可以节省一些时间，并为UI开发人员提供良好的UX

因此，首先，goes不能正常工作，我们不能使用

addClass

，然后使用

removeClass

，因为选择器没有命名

此外，我们还尝试了以下几种变体来全局应用于css规则，但它们还不起作用：

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

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

});

此外，不适用于：

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

有什么提示吗？我们需要一次单击来添加规则，另一次单击来删除规则

谢谢

更新-这是可行的，但也许有更好的方法

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;

});

var$bs\u helper\u css=false；
//单击以添加调试边框##
jQuery（“#bs#u helper”）。单击（函数（e）{
如果（！$bs\U helper\U css）{
var html=“*{border:1px solid#f00！important；}”；
log（'Add:'+html）；
jQuery（'body'）.append（html）；
//跟踪器##
$bs\u helper\u css=true；
}否则{
log（'removecss'）；
jQuery（'#bs#u helper_css'）.remove（）；
//跟踪器##
$bs\u helper\u css=false；
}
返回true；
});

您可以在

body

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

作为奖励，如果需要，您还可以排除项目（例如调试按钮）：

$（“#调试”）。单击（函数（）{$（“正文”）。切换类（“调试”）；}
body.debug:not（.nodebug）{边框：1px粉红色虚线；}

基本元素
嵌套元素

调试
太棒了！这是什么语法？“…=>…”如$（“#调试”）。单击（（）=>$（“正文”）。切换类（“调试”）；-看起来像伪代码，但工作正常吗？它是ES6，与
相同。单击（function（）{$（“body”）…
只能在
=>
内部使用
这个
。在IE11中不工作，但在现代浏览器中工作。在这种情况下，它是一个调试工具，因此我们可能需要它在IE中比在其他任何地方工作得更好；）更新为ES6之前的匿名函数。值得一读（不是问题的副本，仅针对此语法）