1

据我了解，根本不为元素呈现 HTML 或添加 display:none 似乎具有完全相同的行为：两者都使元素消失并且不与 HTML 交互。

我正在尝试禁用和隐藏一个复选框。所以HTML的总量很小；我无法想象性能可能是一个问题。

就编写服务器代码而言，编码工作大致相同。

鉴于这两种选择，一种做法比另一种更好吗？或者我使用哪个都没有关系？

4

6 回答 6

5

据我了解，根本不为元素呈现 HTML 或添加 display:none 似乎具有完全相同的行为：两者都使元素消失并且不与 HTML 交互。

不，这两个选项没有“完全相同的行为”。

如果你用 CSS ( display:none) 隐藏一个元素，它仍然会被渲染

  • 不支持 CSS 的用户代理（例如，文本浏览器），以及
  • 覆盖您的 CSS 的用户代理（例如，用户样式表）。

因此，如果您不需要它，请不要包含它。

如果出于某种原因，您必须包含该元素，但它与您的文档/用户无关（无论在哪个演示文稿中），请使用hidden属性. 通过使用此属性，您可以提供有关 HTML 级别的信息，因此不需要/不需要 CSS 支持。
您可能还想display:none另外使用（这是许多支持 CSS 的用户代理所做的，但它对于不支持该hidden属性的支持 CSS 的用户代理很有用）。
此外，您还可以使用aria-hidden状态hidden，这对于支持 WAI-ARIA 但不支持属性的用户代理可能很有用。

于 2015-02-07T15:41:04.993 回答
2

我的意思是你需要那个复选框吗？如果没有，那么.hide()只是在地毯下刷东西。你让你的 HTML 和你的 CSS 一样混乱。但是，如果它需要在那里，那么肯定，但如果你可以不使用复选框，那么我不会在 HTML 中使用它。

保持简单易读。

于 2015-02-06T22:55:01.940 回答
1

我在隐藏它时看到的唯一积极的事情是，您可能希望稍后由于单击按钮或在页面中激活它的其他东西而将其重新添加。否则，它只会使您的代码不必要地更长。

于 2015-02-06T23:17:00.010 回答
0

The confusion point here is this: Why would you ever use display: none instead of simply not render something?

To which the answer is: because you're doing it client side!

"display: none" is better practice when you're doing client side manipulations where the element might need to disappear or reappear without an additional trip to the server. In that case, it is still part of the logical structure of the page and easier to access and manipulate it than remove (and then store in memory in Javascript) and insert it.

However if you're using a server-side heavy framework and always have the liberty of not rendering it, yes, display:none is rather pointless.

  • Go with "display:none" if the client has to do the work, and manage its relation to the DOM
  • Go with not rendering it if every time the rendered/not rendered decision changes, the server is generating fresh (and fairly immutable) HTML each time.
于 2015-02-06T23:21:48.017 回答
0

对于这样一个微小的场景，结果实际上是相同的。但是用 CSS 隐藏控件是 IMO 不是你想要养成的习惯。

使代码及其输出高效到实用的程度始终是一个好主意。因此，如果您很容易通过添加一点条件来在输出中不包含一些控件，那么一切都可以整齐地管理，请尝试这样做。当然，这不会扩展到接收输入的代码部分，因为您应该始终准备好处理任何任意数据（至少对于公共应用程序）。

另一方面，在某些情况下，产生输出的代码很难修改；特别是，赋予它确定要做什么的能力可能涉及以以下不良做法的形式造成损害：可能添加一个全局变量，或者修改/覆盖多个函数，以便可以传递条件。在这种情况下，只需添加一点 CSS 以再次以简短且本地化的方式实现解决方案，这并非不合理。

值得注意的是，在某些情况下，决策可能会基于外部硬因素。例如，检测垃圾邮件机器人的一个非常基本的机制是包含一个在 HTML 中看起来与其他字段没有什么不同但在 CSS 中不可见的字段。在这种情况下，垃圾邮件机器人可能会填充不可见的字段，从而泄露自己。

于 2015-02-06T23:12:51.513 回答
0

我不喜欢在您的 HTML 中添加不可见且无用的标记。您没有在问题中提供这样做的任何好处，因此简单的答案是：如果您不需要复选框作为页面的一部分，则不要将其包含在您的标记中。

我怀疑隐藏的复选框不会为服务器的下载或工作增加任何明显的时间。所以我同意这不是一个真正的考虑因素。但是，许多页面确实有额外的内容（评论、视图状态等），而且它们都可以加起来。因此，任何持有他们会继续添加用户不需要且从未见过的内容的态度的人，我希望他们创建的页面总体上明显变慢。

现在，您还没有提供任何信息来说明您可能希望包含不需要的标记的原因。尽管您对客户端脚本只字未提，但我可能会在页面中留下隐藏的元素的一种情况是当我编写客户端脚本以删除它们时。在这种情况下，我可以hide()将它留在标记中。一个原因是如果需要我可以很容易地再次展示它。

这是我的回答，但我认为如果您描述了在页面上包含没人会看到的标记的注意事项，您会得到一个更好的答案。当然，它必须提供一些你没有透露的好处，否则你没有理由这样做。

于 2015-02-06T23:13:06.277 回答