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

标签 javascript css

<分区>

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

我做了一些研究并尝试了以下方法:

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


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

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

但是都没有用,我想知道这是否可以用 CSS 完成,还是我需要使用 JS?

最佳答案

你不能通过 CSS 做到这一点,这可能成为 CSS4 的一个特性,但从 CSS3 开始就不起作用了。

您将通过 javascript 执行此操作。

这是一个简单的 jQuery 示例。 ( View the 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 -->

纯 CSS 中做您需要的事情目前是不可能的(据我所知如果我错了请纠正我)。

关于javascript - 我可以通过它包含的内容/值来隐藏 HTML 标签吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17596895/

上一篇:html - div 全屏显示

下一篇:html - 如何将我的 Logo 图像和搜索字段(如 Google 页面)居中? ( Bootstrap )

相关文章:

javascript - 使用 TypeORM 更新多对多关系

html - 为什么我的 header 默认显示为 : block?

css - 为什么 Google 不压缩他们的 webfont CSS?

javascript - 谷歌图表 : duplicate calls in angular js

javascript - 如何在 for...in 中获取嵌套对象属性的正确属性?

css - 用图像填充页面

javascript - 页面加载时类之间的随机切换

html - 左右 CSS 属性无法与输入组 Bootstrap 4 一起正常工作

javascript - 为什么我的提交按钮在此代码中不起作用?

javascript - 简单页面未加载 KnockoutJS observables