根据页面上另一个元素的存在更改 css 元素值答案

【问题标题】：Changing css element value based on existence of another element on page根据页面上另一个元素的存在更改 css 元素值
【发布时间】：2019-12-06 17:47:03
【问题描述】：

我正在经营一家涉及在产品中添加艺术品的商店。单个艺术品算作产品，因此会自动分配一个“可用数量”。这对于不能“缺货”的艺术品没有意义，因此我想在任何具有艺术品类别的页面上隐藏数量。

我只能访问商店的用户面板、css 和 javascript。用户面板没有关闭产品数量或其他解决方法的选项。通常我可以只使用选择器将“艺术”元素与“数量”元素的特定 css 相关联，但这两个元素的关系太远了，我认为单独使用 css 是不够的。

我的 javascript 非常生锈，但我希望有一种简单的方法可以针对链接标题为“艺术”的同一页面上的任何“数量”<div>s。将<div> 更改为显示：无；非常适合我的目的。以下是相关代码：

【问题讨论】：

标签： javascript css-selectors css-variables

【解决方案1】：

是的，您可以使用 javascript 来实现：

// Determine if <a title="Art"> exists in the document
if (document.querySelectorAll('a[title="Art"]').length > 0) {

  // Give .box-qty a style of display: none
  const boxQty = document.getElementsByClassName('box-qty')[0];
  boxQty.style.display = 'none';
}

【讨论】：

我的错；它需要更具体地覆盖另一种样式。将 display=none 分配给“.grid-layout .productbox .box-qty”应该可以解决问题。我将如何指定？
const boxQty = document.querySelector('.grid-layout .productbox .box-qty');
第一行是documentQuerySelectorAll还是document.querySelectorAll？
道歉 - 这是一个错字：应该是document.querySelectorAll()
似乎无法让它工作，我也不知道为什么。希望我能比这更具体，但我没有收到任何错误，我不知道如何检查问题所在。对不起。