在JQuery/Javascript中运行CSS

Run CSS inside JQuery/Javascript

本文关键字：运行 CSS Javascript JQuery      更新时间：2023-09-26

我的网页有一些问题。我有四个不同的图像，使用CSS进行灰度缩放。我已经创建了一个.svg文件来实现这一点。现在我想要的是，每当用户点击图像时，灰度过滤器将被禁用，显示原始颜色。但是css只有：active和：hover。我想要的是在点击期间。这是我的代码：

//CSS
<style type="text/css">
 #main, #beverage, #set, #appetizer {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
#main {
filter: none;
-webkit-filter: grayscale(0);
}
//IMAGES
<td>
<img src="main.png" width="80" style="cursor:pointer" id="main"><br>
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage"><br>
<img src="set.png" width="80" style="cursor:pointer" id="set"><br>
<img src="set.png" width="80" style="cursor:pointer" id="appetizer"><br>
</td>

您可以简单地设置一个带有灰度过滤器的类，并在单击图像时将其删除

HTML

<img src="main.png" width="80" style="cursor:pointer" id="main" class="grayscale"><br>
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage" class="grayscale"><br>
<img src="set.png" width="80" style="cursor:pointer" id="set" class="grayscale"><br>
<img src="set.png" width="80" style="cursor:pointer" id="appetizer" class="grayscale"><br>

CSS

.grayscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

jQuery

$('.grayscale').click(function(){
    $(this).removeClass('grayscale');
});

$('#id').css('key' , 'value');

覆盖点击处理程序中的CSS：

$("#main, #beverage, #set, #appetizer").click(function() {
    $(this).css({ filter: "none",
                  "-webkit-filter": "grayscale(0)"
                });
}

$('img.#main, img#beverage, img#set, img#appetizer').click(function(){
    $(this).css({
        '-webkit-filter': '',
        'filter': ''
    })
});

keep z-index also with this class for more perfect work without any future errors:
.grayscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    z-index:100;
}
and then use click function :
$('.grayscale').click(function(){
    $(this).removeClass('grayscale');
});
相关文章：