HTML 标签中的条件格式

Posted 2023-03-14

【中文标题】HTML 标签中的条件格式

【英文标题】：Conditional Formatting in HTML Tags

【发布时间】：2010-10-04 21:13:26

【问题描述】：

是否有任何选项可以在 html 标签中使用 IF-ELSE 条件

 <if true>  do something   </if>  
 <else>     do something   </else>

【参考方案1】：

感谢 Kevin Loney 和他的 javascript 解决方案，我们还应该考虑 CSS 条件。如果条件是基于浏览器感知/响应式设计，那么可以绕过javaScripting：

<div class='if-part'>show something</div>
<div class='else-part'>show something</div>

“显示某些东西”是指您只会隐藏不适用的条件。在下面的示例中，“if-part”仅显示在移动设备上。 “else-part”显示在较大的屏幕上。

@media screen and (max-width:767px)
    .if-partdisplay:initial;
    .else-partdisplay:none

@media screen and (min-width:768px)
    .if-partdisplay:none;
    .else-partdisplay:initial

This answer 提供了更多可供考虑的 CSS 选项。

【参考方案2】：

你们有没有写过电子邮件？你所有的java脚本都被谷歌剥离了。此外，android 上的 gmail 不支持媒体查询，并且不同版本的 Outlook 有自己的怪癖。如果您想要在各种电子邮件客户端上呈现良好的电子邮件，您别无选择，只能使用条件 HTML。

这很像第二个例子：

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

但是，如果您不使用电子邮件客户端，我将不得不同意其他所有人的观点，并说您应该使用 Java Script。

【参考方案3】：

正如在其他帖子中所说，HTML 不支持条件逻辑。你有两个选择：

1) 使用 php 或 XSLT 等技术动态生成 HTML

2) 使用 Javascript 修改 HTML DOM

【参考方案4】：

HTML 的条件渲染并不是一个新概念，但它不能完全使用 HTML 来完成。您需要使用客户端脚本或服务器端代码来提供相应地呈现 HTML 的条件逻辑。

【参考方案5】：

HTML 是为文档布局而设计的，因此 noscript 和 noframes 与 HTML 处理条件的能力差不多。你可以想象用 javascript 来解决这个问题。

<div id='if-part' style='visibility: hidden;'>do something</div>
<div id='else-part' style='visibility: hidden'>do something</div>

<script>
    var node;
    if(true) 
        node = document.getElementById('if-part');
    
    else 
        node = document.getElementById('else-part');
    
    node.style.visibility = 'visible';
</script>

当然，这只有在客户端打开了 javascript 时才有效。

【讨论】：

true，但前提是客户端禁用了 javascript。

【参考方案6】：

有，不过是really only used in IE区分不同版本：

<!--[if IE6]>
    Things here!
<![endif]-->

【参考方案7】：

不要迂腐，但 HTML 是一种标记语言，对条件逻辑没有用处。

话虽如此，听起来您正在寻找的是一些 javascript。如果您可以为您的问题添加更多细节，我可以详细说明如何使用 javascript 执行具有条件逻辑的任务。

【讨论】：

我不认为你是迂腐的......正确 - 仅用于标记的 HTML。

这个评论很晚，但 PHP 不是 if/else 情况的首选解决方案吗？如果用户没有在他们的浏览器中启用 javascript，或者 javascript 不是跨浏览器（或有错误），您最终可能会得到意想不到的、不需要的结果。 PHP 不进行客户端评估，因此最终结果更可预测。我喜欢 javascript，但它不应该是所有事情的首选解决方案。

好吧，说实话，一切都晚了。每个主流浏览器都有强大的 JavaScript 支持。当然，javascript 并不总是通用的，但对于每个需要它的浏览引擎，通常都有一些奇怪的解决方法。