HTML 标签中的条件格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/502431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditional Formatting in HTML Tags
提问by balaweblog
Is there any option for using IF-ELSE conditioning in HTML tags
是否有任何选项可以在 HTML 标签中使用 IF-ELSE 条件
<if true> do something </if>
<else> do something </else>
回答by hydrapheetz
There is, but it's really only used in IEto distinguish between different versions:
有，但它实际上只在 IE 中用于区分不同版本：
<!--[if IE6]>
Things here!
<![endif]-->
回答by wilsoniya
Not to be pedantic, but HTML is a markup language, and isn't useful for conditional logic.
不是迂腐，但 HTML 是一种标记语言，对条件逻辑没有用。
That being said, it sounds like what you're looking for is a bit of javascript. If you could add a bit more detail to your question, I could elaborate on how you could use javascript to do tasks with conditional logic.
话虽如此，听起来您正在寻找的是一些 javascript。如果您可以为您的问题添加更多细节，我可以详细说明您如何使用 javascript 执行具有条件逻辑的任务。
回答by Kevin Loney
HTML was designed for document layout so the noscript and noframes are about as close as HTML gets to handling conditionals. You could conceivably approach this problem with javascript.
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>
of course this only works if the client has javascript turned on.
当然，这仅在客户端打开 javascript 时才有效。
回答by Cerebrus
Conditional rendering of HTML is not a new concept, but it cannot be done using HTML exclusively. You would need to use either client side scripting or server side code to provide the conditional logic that would render your HTML accordingly.
HTML 的条件呈现并不是一个新概念，但不能仅使用 HTML 来完成。您需要使用客户端脚本或服务器端代码来提供相应地呈现 HTML 的条件逻辑。
回答by Bill
Have you guy's ever coded an email? All of your java script is stripped by google. Furthermore, gmail on android does not support media queries, and different versions of outlook have their own quirks. You have no choice but to use conditional HTML if you want to emails that render well on a variety of email clients.
你有没有给电子邮件编码过？你所有的java脚本都被谷歌剥离了。此外，android上的gmail不支持媒体查询，不同版本的outlook都有自己的怪癖。如果您想要在各种电子邮件客户端上呈现良好的电子邮件，您别无选择，只能使用条件 HTML。
This is much like the second example:
这很像第二个例子：
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
However, if you are not going through an email client I would have to agree with everyone else and say you should use Java Script.
但是，如果您不通过电子邮件客户端，我将不得不同意其他所有人的意见，并说您应该使用 Java Script。
回答by 17 of 26
As has been said in other posts, HTML does not support conditional logic. You have two choices here:
正如在其他帖子中所说，HTML 不支持条件逻辑。您在这里有两个选择：
1) Generate the HTML dynamically using technologies such as PHP or XSLT
1) 使用 PHP 或 XSLT 等技术动态生成 HTML
2) Modify the HTML DOM after the fact using Javascript
2）事后使用Javascript修改HTML DOM
回答by Parapluie
With acknowledgement to Kevin Loney and his javaScript solution, we should also consider CSS conditionals. If the conditional is based on browser-sensing/responsive design, then javaScripting can be bypassed:
感谢 Kevin Loney 和他的 javaScript 解决方案，我们还应该考虑 CSS 条件。如果条件基于浏览器感知/响应式设计，则可以绕过 javaScripting：
<div class='if-part'>show something</div>
<div class='else-part'>show something</div>
"Show something" in the sense that you would merely hide the condition which does not apply. In the example below, "if-part" is shown on mobile devices only. "else-part" is shown on larger screens.
“显示某物”的意思是您只会隐藏不适用的条件。在下面的示例中，“if-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 answeroffers even more CSS options to consider.
这个答案提供了更多的 CSS 选项来考虑。
