Question

我们正在使用供应商提供的.Net Web应用程序。它具有用户输入JavaScript和CSS以执行一些简单的UI修改的功能。它们在加载应用程序时执行。

我们希望暂时隐藏Web UI上的按钮。

在F12开发人员工具中，我们找到了该按钮的ID。

我们使用这个CSS脚本来隐藏按钮，它可以正常工作。

#ext-gen391 {
display: none !important;}

但是，id不是固定的。它随着不同的登录用户组而变化。所以CSS脚本不够好。

我正在考虑使用JavaScript但不确定如何启动。有人可以帮忙吗？

修改感谢大家的投入。很抱歉，我没有提到其他按钮的id也以ext-gen开头。

在我看来，唯一的＆＃34;独特的身份＆＃34;我可以参考按钮的位置。

如何隐藏第3个td元素？请注意，id ext-gen391不是固定的。对于不同的登录用户组，它会有所不同。

Answer 1

首先关闭那小块CSS，你试图根据一个类而不是一个Id来选择按钮。这就是为什么它不起作用。

你可以使用CSS

[id^=ext-gen] {
   display: none !important;
}

或jQuery

$('[id^=ext-gen]').hide();

但是，实际上，如果您可以控制渲染的内容，最好的方法是尝试添加更多唯一的ID /类。

Answer 2

您可以尝试在css中使用这样的id匹配器：

*[id^="ext-gen"] {

}

选择以ext-gen开头的所有HTML元素。

Answer 3

这应该有效：

td.x-toolbar-cell[id^=ext-gen]{
    display: none !important;
}

如果只有数字更改，请参阅attribute selectors以获取更多信息。

Answer 4

尝试使用css类名来执行此操作。

您可以通过将您的Open链接放在#show div

中来解决它

JSFiddle

<强> HTML

<div id="show">
    <a href="#show" id="open" class="btn btn-default btn-sm">Open</a>
    <div id="content">
        some text...
        <a href="#hide" id="close" class="btn btn-default btn-sm">Close</a>
    </div>
</div>

<强> CSS

#content {
    display: none;
}
#show:target #content {
    display: inline-block;
}
#show:target #open {
    display: none;
}

使用此解决方案here。恭喜@Mathias

如何使用JavaScript隐藏此按钮？

4 个答案: