Javascript优雅地降低整个div

所以在页面上我有一个div，它是布局的一部分。 div包含JS的东西，所以虽然它是布局的一部分，但如果没有Javascript，没有必要显示它。Javascript优雅地降低整个div

现在，我通常把这个<head>：

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

但我的老板想要的页面加载期间股利。所以我不得不求助于一些丑陋的<body>：

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

这是无效的XHTML，有一些IE的缺点我听到的，最重要的是它只是吸收。

我还能做什么？

将<style>元素留在头部。

没有什么无效大约有<script>作为同级元素的<div>

您可以更高效：

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

和

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

这就是说，如果一个元素只有在JS可用的情况下才是相关的，那么在JS不可用的情况下使用JavaScript添加它而不是试图隐藏它通常是有意义的。

2012-10-29 09:40:57 Quentin

回答