Question

我有

<div class="slide slick-slide slick-current slick-active" data-slick-index="0"
aria-hidden="false" style="width: 1730px; position: relative; left: 0px; top:
0px; z-index: 999; opacity: 1;" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00">

我想删除z-index，我试图

jQuery(document).ready(function( $ ){
    jQuery('.slick-slide).css('z-index', "");
});

和

jQuery(document).ready(function( $ ){
    jQuery('.slick-slide).css('z-index', "auto");
});

，我尝试了上面div中列出的所有类，但没有任何效果。我只想删除z-index，这是一个wordpress网站，因此使用JS / JQuery是我唯一的选择。

Answer 1

您不需要jQuery的 - 使用Element.style.removeProperty()

document.querySelector(".slick-slide").style.removeProperty("z-index");

Answer 2

如果只有z-index作为内联并且要删除它，则应该删除整个style属性。

`$('.slick-slide').removeAttr('style');`

我看到你正在使用油滑滑块。我建议不要删除油滑担任任何样式。最好用一些CSS写一个丑陋的替代。

Answer 3

根据上述评论的要求：

只需使用.slick-slide在CSS中覆盖!important，就不需要JavaScript。

.slick-slide { 
    z-index: 0 !important;
}

编辑：

0只是一个占位符，选择一个您认为合适的值或将其设置为initial作为z-index的默认值。

Answer 4

我要添加自己的答案，但由于不确定该答案是否正确而无法接受。

更好的解决方案是设置您创建的父div

.example-banner { 
    z-index: 0;
}

并保留光滑的滑块，这也将解决此问题。所不同的是，如果您确实喜欢建议的接受的答案（如我之前建议的那样），则会遇到一个问题，即如果您单击任何href，它将带您到最后一个href

因此，假设您的滑块有5张幻灯片，每张幻灯片都有一篇文章的链接，当您单击其中任何一个链接时，您将被带到上一篇文章。

如何使用JS删除内联CSS？

4 个答案: