HTML标签中的条件格式化

Question

HTML标签中的条件格式化

10

在HTML标签中是否有使用IF-ELSE条件语句的选项

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

- balaweblog

8个回答

9

不是要挑剔，但HTML只是一种标记语言，不能用于条件逻辑。

话虽如此，看起来你需要一些JavaScript。如果您能提供更多细节，我可以详细介绍如何使用JavaScript执行带有条件逻辑的任务。

- wilsoniya

1

我认为你并不是过于追求细节...完全正确——HTML仅用于标记。 - Jayx

2

非常晚才发表这个评论，但是PHP不是if/else情况的首选解决方案吗？如果用户在浏览器中没有启用JavaScript或JavaScript不是跨浏览器（或存在错误），则可能会出现意外和不必要的结果。PHP不执行客户端评估，因此最终结果更可预测。我喜欢JavaScript，但它不应该成为所有问题的首选解决方案。 - xaddict

1

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

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

- Kevin Loney

仅当客户端禁用JavaScript时，返回true。 - Kevin Loney

4

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

- Cerebrus

3

你们有没有编写过电子邮件？所有的JavaScript代码都会被Google删除。此外，Android上的Gmail不支持媒体查询，而不同版本的Outlook也有自己的怪癖。如果您想要在各种电子邮件客户端上呈现良好的电子邮件，则只能使用条件HTML。

这很像第二个例子：

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

然而，如果您没有使用电子邮件客户端，我必须同意其他人的看法，并建议您使用JavaScript。

- Bill

2

正如其他文章中所提到的，HTML不支持条件逻辑。你有两个选择：

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

2) 之后使用JavaScript修改HTML DOM

- 17 of 26

2

在感谢Kevin Loney及其JavaScript解决方案的基础上，我们还应考虑CSS条件语句。如果条件是基于浏览器检测/响应式设计，则可以绕过JavaScript：

原始答案: "最初的回答"

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

“Show something”指的是您仅需隐藏不适用的条件。在下面的示例中，“if-part”仅在移动设备上显示。“else-part”则在较大的屏幕上显示。

原始回答: Original Answer

@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}
}

这个回答提供了更多需要考虑的CSS选项。

注：Original Answer翻译成"最初的回答"

- Parapluie

-2

    ***Syntax***

{% 如果 condition1 %} 代码行

{% 或者 condition2 %} 代码行

{% 否则 %} 代码行

{% 结束如果 %}

    ***Example***

role='经理'

{% if role=='管理员' %} 你好，管理员

{% elif role=='经理' %} 你好，经理

{% else %} 您是普通用户

{% endif %}

- Umesh P

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hydrapheetz · Accepted Answer

有，但它只在IE中使用以区分不同的版本：

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