javascript - Javascript优雅地降级整个div

Question

所以在页面上我有一个 div 是布局的一部分。div 包含 JS 的东西，所以虽然它是布局的一部分，但如果没有 Javascript，那么显示它是没有意义的。

现在我通常会把它放在<head>：

<style> div#target{ display:none } <style>
<script> $(document).ready(function(){ $('div#target').show(); }); </script>

但是我的老板在页面加载期间想要那个 div。所以我不得不求助于一些丑陋的东西<body>：

<style> div#target{ display:none } <style>
<div id="target">stuff in div</div>
<script> $('div#target').show(); </script>

这是无效的 xHTML，我听说有一些 IE 缺点，最重要的是它很糟糕。

我还可以做些什么？

score 3 · Accepted Answer

将元素留<style>在头部。

<script>将 a作为同级元素并没有什么无效的<div>

您可以通过以下方式提高效率：

div#target{ display: none }
body.js div#target{ display: block }

和

<body>
<script> document.body.className += " js"; </script>

也就是说，如果一个元素仅在 JS 可用时才相关，那么使用 JavaScript 添加它而不是在 JS 不可用时尝试隐藏它通常是有意义的。

1 回答 1