使用 Javascript 隐藏具有特定 data-test-id 值的元素
Using Javascript to hide elements with specific data-test-id value
我经常使用一个简单的 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; }");
我遇到的问题是 Yahoo Mail 中的很多内容没有通用 Class 或 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 属性的元素。
您可以select基于这样的属性。
我 select 使用 data-test-id=cheese
处理所有元素,然后使用 for 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>
两个片段做同样的事情。
希望对您有所帮助
我经常使用一个简单的 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; }");
我遇到的问题是 Yahoo Mail 中的很多内容没有通用 Class 或 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 属性的元素。
您可以select基于这样的属性。
我 select 使用 data-test-id=cheese
处理所有元素,然后使用 for 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>
两个片段做同样的事情。
希望对您有所帮助