-1

我经常使用一个简单的 Greasemonkey JS 脚本来隐藏网页上的元素 - 这是我用来隐藏 Yahoo Mail 上的一些广告的基本脚本，这些广告位于具有特定 ID 的 DIV 中：

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(" #slot_LREC, #slot_LREC4 { display:none; }");

我遇到的问题是，雅虎邮箱中的很多内容都没有通用的类或 ID，而是有一个data-test-id值 - 例如

<a data-test-id="pencil-ad" class="something_very_complicated">example</a>

我想知道是否有任何方法可以创建 addGlobalStyle 函数的变体来隐藏元素具有特定data-test-id值的元素？

我没有使用 jQuery 的选项——或者至少，我不知道如何将 jQuery 添加到 GM 脚本中……

据我所知，这不是javascript: select all elements with "data-" attribute (without jQuery)因为我试图仅隐藏 data-test-id 属性具有特定值的一个元素. 我不想隐藏所有具有 data-test-id 属性的元素。

4

1 回答 1

4

您可以根据这样的属性进行选择。

我正在选择所有元素，data-test-id=cheese然后我使用 afor of来隐藏它们。

let elements = document.querySelectorAll('[data-test-id=cheese]');

for (let element of elements) {
  element.style.display = "none";
}
div {
  height: 100px;
  margin: 5px 0px;
  background: tomato;
  line-height: 100px;
  text-align: center;
  color: white;
  font-size: 20px;
}
<div>1</div>
<div>2</div>
<div data-test-id="cheese">3</div>
<div>4</div>
<div data-test-id="cheese">5</div>
<div>6</div>
<div data-test-id="cheese">7</div>
<div>8</div>

当然，您也可以通过添加这一点 CSS 来执行此操作而无需任何 javascript

div {
  height: 100px;
  margin: 5px 0px;
  background: tomato;
  line-height: 100px;
  text-align: center;
  color: white;
  font-size: 20px;
}

[data-test-id=cheese] {
  display: none
}
<div>1</div>
<div>2</div>
<div data-test-id="cheese">3</div>
<div>4</div>
<div data-test-id="cheese">5</div>
<div>6</div>
<div data-test-id="cheese">7</div>
<div>8</div>

两个片段都做同样的事情。

希望这会有所帮助

于 2018-01-02T16:36:27.130 回答