XHTML 文档类型不允许正文中的元素“样式”答案

【问题标题】：XHTML document type does not allow element "style" in bodyXHTML 文档类型不允许正文中的元素“样式”
【发布时间】：2012-03-08 16:52:39
【问题描述】：

我有一个使用 XHTML 过渡的文档。在正文中，我使用带有<style type="text/css"> 的<noscript> 标签。

我知道 <style type="text/css"> 只允许在 <head> 中使用，但我仍然需要仅在未检测到 JavaScript 时应用 CSS。

如何在通过 XHTML 验证的同时解决这个问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
  <noscript>
    <div id="section-featured-nojavascript" class="section">
      <style type="text/css">
        #featured, #section-portfolio { display:none; visibility:hidden }
      </style>
    </div>
  </noscript>
</body>

使用 W3 验证时出错

document type does not allow element "style" here [XHTML 1.0 Transitional]

【问题讨论】：

<noscript> 不允许在 <head> 中吗？ :)
您可以尝试其他方式：默认使用此样式表并使用 JavaScript 使其可见。
嗨 Stefan，对不起，我忘了在我的问题中写
@Stefan — 不，不是（至少在 XHTML 1.0 过渡版中没有）。
见@Quentin 回答的stackoverflow.com/questions/4902658/…

标签： javascript html xhtml w3c-validation

【解决方案1】：

不要尝试使用单独的样式表。使用 JS 将 js 类添加到 <body> （或删除 no-js 类）。然后将其用作主样式表中后代选择器的一部分。

【讨论】：

这是一种非常标准的技术。我在 90 年代使用它……在modernizr 出现之前的几年。
您好 Quentin，感谢您的回答，但我无法理解您的观点，您能否添加一个简短的示例或某个资源的链接？非常感谢！
.js p { background: sky-blue-pink; } & document.body.className += ' js'

【解决方案2】：

你可以设置

#featured, #section-portfolio { display:none; visibility:hidden }

默认情况下在您的 CSS 中并使用 javascript“撤消”它？

来自 w3schools： noscript 标签用于为在浏览器中禁用脚本或浏览器不支持客户端脚本的用户提供替代内容。

noscript 元素可以包含您可以在普通 HTML 页面的 body 元素中找到的所有元素。

元素内的内容只有在脚本不受支持或在用户浏览器中被禁用时才会显示。

【讨论】：

【解决方案3】：

您可以尝试使用 javascript 更改 css 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>What ever</title>
<link rel="stylesheet" type="text/css" href="scripting_off.css"  id="client_side_scripting"/>
<script  type="text/javascript">
document.getElementById('client_side_scripting').setAttribute('href','scripting_on.css');
</script>
</head>
<body>

</body>
</html>

【讨论】：