仅将CSS应用于某些产品缩略图

时间:2020-04-26 作者:BiosBernhard

我正在运行一个WooCommerce网站,发现了一种导入产品图像的新方法,需要将CSS应用于缩略图of new products only 让旧产品保持原样。

查看源代码,我发现每个产品都有一个产品ID:

<li class="product type-product post-100 data-product-id="100">
是否有任何方法可以将CSS应用于数据产品id>100?例如。

if (data-product-id > 100) {
  padding: 50px;
}
使用第三方插件或添加自定义JS/CSS代码?

1 个回复
SO网友:Joel Hager

在创建这些缩略图时,是否可以指定一个新类,并相应地设置样式?

如果您想这样做:

你需要抓住每一个元素[data-id] 属性到对象数组中var ids = document.querySelectorAll("[data-id]");

然后需要对其进行迭代,并检查值:

ids.forEach((el) => {
        if (parseInt(el.dataset.id) > 100) {
            el.classList.add("new-style");
        }
    });
您可以在CSS中添加新样式(因此您可以根据需要进行更改,而无需接触js)

您希望将js包装在一个文档中,以便在开始之前元素就已经存在,否则它将返回未定义的。

最终代码:

document.addEventListener("DOMContentLoaded", function () {
    var ids = document.querySelectorAll("[data-id]");

    ids.forEach((el) => {
        if (parseInt(el.dataset.id) > 100) {
            el.classList.add("new-product");
        }
    });
});
然后,您可以使用.new-product{} 在CSS文件中。

我希望这有帮助!

相关推荐

页脚不支持CSS样式表

我是wordpress开发的新手,我尝试编辑我的第一个博客,编辑菜单并不痛苦,但页脚不尊重css代码,尽管样式表是相同的。下面是将css样式表文件排入队列的代码:function load_stylesheets() { /* loading my own stylesheet */ wp_register_style(\'style\', get_template_directory_uri() . \'/css/mainstyle.css\', array(), false, \'al