应用CSS onclick

Question

如何使用我当前的javascript代码将这些css应用于正文

-webkit-filter: blur(20px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
opacity: 0.95;

这是我的javascript

<script>
    $("a:nth-child(4)").click(function () {
        $(".artists").animate({width:'toggle'},500);                 
});
</script>

Answer 1

为此添加一个类，然后单击

应用它

<强> CSS

.urClass{
  -webkit-filter: blur(20px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  opacity: 0.95;
}

<强> JS

$("a:nth-child(4)").click(function () {
    $(".artists").animate({width:'toggle'},500);
    $('body').addClass('urClass');                 
});

Answer 2

最好只使用.addClass，即使您有1个或更多。它更易于维护和阅读。

如果你真的有做多个css道具的冲动，那就用

$("a:nth-child(4)").click(function () {
    $(".artists").animate({width:'toggle'},500);
    $('body').css({
                 '-webkit-filter': 'blur(20px)', 
                 '-moz-filter': 'blur(15px)', 
                 '-o-filter: blur(15px)', 
                 '-ms-filter': 'blur(15px)', 
                 'filter': 'blur(15px)', 
                 'opacity': '0.95'
                 });               
});

Answer 3

如果你想在没有jQuery的情况下这样做：

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                alert('ho ho ho');
            }
        }
    }
</script>

并且没有jQuery，只在特定的类（例如：hohoho）：

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            if(/\bhohoho\b/).match(anchor.className)) {
                anchor.onclick = function() {
                    alert('ho ho ho');
                }
            }
        }
    }
</script>
If you are okay with using jQuery, then you can do this for all anchors:

<script>
    $(document).ready(function() {
        $('a').click(function() {
            alert('ho ho ho');
        });
    });
</script>

此jQuery片段仅将其应用于具有特定类的锚点：

<script>
    $(document).ready(function() {
        $('a.hohoho').click(function() {
            alert('ho ho ho');
        });
    });
</script>