如何在 Squarespace 模板中使用 Javascript 设置 H1 标签的样式

Question

我们的 Squarespace 网站有一个包含多个品牌产品的目录。我试图通过将其设为粗体来确保品牌名称脱颖而出，但考虑到 Squarespace 的工作方式，我需要将 Javascript 添加到页面中以操纵 html.

在产品标题上使用 Chrome 开发工具，我可以看到 html class 名为“.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 class 结构：

<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 只会 return 匹配

的第一个元素

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（当前在 设计 > 自定义 CSS 下编辑您的站点）。通读了这个问题后，我没有看到任何排除使用 CSS 的细节（尽管这些细节可能只是被忽略了）。

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

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

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

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

如果您选择 CSS 路线，请务必评估并删除之前添加的与此特定需求相关的所有代码。

如何在 Squarespace 模板中使用 Javascript 设置 H1 标签的样式

How to Style H1 Tag with Javascript in Squarespace Template

javascript

html

squarespace