javascript - 应用 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

即使您有 1 个或更多，也最好只使用.addClass 。它更具可维护性和可读性。

如果你真的有做多个 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>