如何使用 JS 删除内联 CSS？

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 并且想要删除它，您应该删除整个样式属性。

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

我看到您正在使用 Slick Slider。我建议不要删除 Slick 提供的任何样式。最好用一些 CSS 来写一个丑陋的覆盖。

Answer 3

根据以上评论的要求：

只需将 CSS 中的 .slick-slide 替换为 !important，不需要 JavaScript。

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

编辑：

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

Answer 4

我正在添加自己的答案，但不能接受，因为我不确定这是正确的答案。

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

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

并保持光滑的滑块不变，这也可以解决问题。不同之处在于，如果您确实喜欢建议的已接受答案，就像我之前建议的那样，您将面临一个问题，即如果您单击任何 href，它将带您到最后一个 href滑块的。

假设您的滑块有 5 张幻灯片，每张幻灯片都有一篇文章的 link，当您点击其中任何一篇 link 时，您将被带到最后一篇文章.

如何使用 JS 删除内联 CSS？

How to remove Inline CSS using JS?

html

javascript

css

jquery

webpage