javascript - 我可以通过它包含的内容/值来隐藏 HTML 标记吗？

Question

我试图从一个页面中隐藏一个 h1 标签，现在它是一个动态页面，所以它们不是我可以定位的任何钩子。我希望他们能从 CSS 快速修复以定位内容。

I've done some research and attempted the following methods:

<div id="pageH1">
<h1>value</h1>
<div class="clear"></div>
</div>


h1[att~=value] {
    display:none;
}

h1[att=value] {
    display:none;
}

However neither have worked, I was wondering if this was something that can be done with CSS or will I need to use JS?

score 0 · Accepted Answer

你不能通过 CSS 做到这一点，这可能成为 CSS4 的一个特性，但在 CSS3 中不起作用。

您将通过 javascript 执行此操作。

这是一个简单的 jQuery 示例。（查看 JSFiddle）

$('h1:contains("value")').hide(); // Hide any h1 element that contains "value"

上面的代码将匹配以下所有行。

<!-- All three h1 tags will be matched -->
<h1>value<h1>
<h1>value #2<h1>
<h1>This is another h1 with "value" #3</h1>

您可以添加一个.no-hide类并执行以下操作：

// Hide all h1 tags with value, EXCEPT .no-hide
$('h1:contains("value"):not(.no-hide)').hide();

这将导致：

<h1>value</h1>                                             <!-- Hidden -->
<h1>value #2</                                             <!-- Hidden -->
<h1>This is another h1 with "value" #3</h1>                <!-- Hidden -->
<h1 class="no-hide">This has value but will not hide</h1>  <!-- NOT Hidden -->

pure CSS目前不可能做你需要的事情（据我所知，如果我错了，请纠正我）。

score 0 · Accepted Answer

虽然不存在 CSS 解决方案，但一个简单的 JavaScript 函数可能会解决您的问题

function forContent (selector, content, action) {
  [].forEach.call (document.querySelectorAll (selector), function (h) {
    (content === null ||
     typeof content == 'function' && content (h.innerHTML) ||
     typeof content == 'string' && content == h.innerHTML ||
     content.test && content.test (h.innerHTML)) && action (h);
  });
}

请参阅示例小提琴：http: //jsfiddle.net/jstoolsmith/uL9DZ/

score 0 · Accepted Answer

：空的

会有一个 CSS 选择器 .. 我们希望，很快就会被批准。

对于您的情况，我不建议使用 : empty。

我会使用 jQuery。

if ($('#element').is(':empty')){
  //your coding
}

或者

if ($('h1').is(':empty')){
  //your coding
}

如果为空，只需为“每个”应用一个例程即可“删除”。

$( 'h1:empty' ).remove(); /* take the h1 OUT of the DOM */

或者

$( 'h1:empty' ).hide(); /* display:none, visibility:hidden, opacity:0 */

score -3 · Accepted Answer

您可以像隐藏一样使用可见性

h1

{

可见性：隐藏；

}

通过使用这个你可以隐藏h1标签.....

javascript - 我可以通过它包含的内容/值来隐藏 HTML 标记吗？

4 回答 4

Related

Reference