應用CSS的onclick

Question

如何應用這些CSS的身體我目前的javascript代碼

-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

如果你想這樣做沒有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> 

Answer 3

更好的是隻要使用.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' 
       });    
});