如何使用javascript更改woocommerce类

Question

我有一个包含"woocommerce columns-3“类的类别，我想将其更改为"woocommerce columns-4”。我如何使用javascript来做这件事？

我已经尝试过这个代码，但没有成功：

<script type="text/javascript"> 
document.getElementById("main").classList.add('woocommerce columns-4');
document.getElementById("main").classList.remove('woocommerce columns-3');
</script>

HTML

Answer 1

您必须以正确的元素为目标才能使其工作。在您的代码中，您正尝试以id为main的元素为目标。

我建议您使用document.querySelector()，这样您的代码将为：

<script type="text/javascript">
// select element        
var ourElement=document.querySelector(".elementor-widget-container .woocommerce.columns-3");
ourElement.classList.remove('columns-3');
ourElement.classList.add('columns-4');
</script>