HTML 标签中的条件格式

Question

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

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

Answer 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-part{display:initial;}
    .else-part{display:none}
}
@media screen and (min-width:768px){
    .if-part{display:none;}
    .else-part{display:initial}
}

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

Answer 2

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

这很像第二个例子：

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

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

Answer 3

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

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

2) 使用 Javascript 修改 HTML DOM

Answer 4

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

Answer 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 时才有效。

Answer 6

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

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

Answer 7

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

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