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

Question

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

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

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

标签： javascriptcss-selectorscss-variables

Answer 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';
}