Question

我们的Squarespace网站上有一个目录，其中包含来自多个品牌的产品。我试图通过将其加粗来确保品牌名称脱颖而出，但是鉴于Squarespace的工作方式，我需要在页面中添加Javascript来操作html。

使用产品标题上的Chrome开发工具，我可以看到html类称为“ .ProductList h1.ProductList-title”。

我已经尝试实现以下功能，但到目前为止运气不佳-我是否走在正确的轨道上？

function changeBrandName() 
{
  var prodList = document.getElementsByClassName(".ProductList h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    prodList[i].style.color = 'red';
  }
}

window.onload = changeBrandName();

Squarespace类结构：

<section class="ProductList-overlay">
          <div class="ProductList-meta">
            <h1 class="ProductList-title">Vifa - Pebble Grey Oslo Loudspeaker</h1><style></style>                                                 
            <div class="product-price">
<span class="sqs-money-native">0.00</span>
</div>
          </div>
        </section>

（这是我们正在展示产品https://www.manilva.co/catalogue-electronics/的页面之一）。

Answer 1

看看：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

使用getElementsByClassName时，不需要像过去那样传入CSS选择器。您只需要输入类的实际名称即可。或者，将querySelectorAll与原始参数一起使用。如daksh所述，querySelector将仅返回与

匹配的第一个元素

function changeBrandName()
{
  var prodList = document.querySelectorAll(".ProductList h1.ProductList-title"); //returns static NodeList of all elements in DOM that match the provided classes
  for (i = 0; i < prodList.length; i++) 
  {
    prodList[i].style.color = 'red';
    prodList[i].style.fontWeight = 'bold'; //W is capital
  }
}

Answer 2

您已指出必须使用Javascript。但是，Squarespace支持自定义CSS（当前在编辑网站时位于 Design>自定义CSS 下）。仔细阅读问题后，我看不到任何妨碍使用CSS的细节（尽管也许这些细节被遗漏了）。

如果可以选择使用CSS，则只需通过Custom CSS插入以下内容：

.ProductList h1.ProductList-title {
  color: red;
  font-weight: bold;
}

如果出于某种原因您只想定位特定的集合，则可以通过集合ID（用作id元素的body属性）向选择器添加更多的特异性：

#collection-5c1cf955898583ce09da99a0 .ProductList h1.ProductList-title {
  color: red;
  font-weight: bold;
}

如果您选择使用CSS路线，请确保评估并删除之前添加的与此特殊需求相关的任何代码。

如何在Squarespace模板中使用JavaScript样式化H1标签

2 个答案: