Question

我有一个带有几个div的网页，首先要发现的是检测脚本是否已启用，如果它们不是现在可以呈现的页面，但是如果启用了javascript，我需要更改div的大小

在屏幕上显示div之前是否有隐藏div所以我可以使用javascript调整它然后再次显示？

所以目标：

用户点击页面链接
如果未启用脚本，则不执行任何操作
如果启用了脚本，请隐藏div。
调整div的大小
显示div并在屏幕上显示

如何组织我的3个脚本调用来实现此目的？

功能-1：hideDiv（）
功能-2：changeDivSize（）
功能-3：showDiv（）

编辑：如果默认情况下我隐藏div，然后调整大小+用javascript取消隐藏它我仍然需要为没有启用脚本的人取消隐藏它

Answer 1

用户点击页面链接：
如果启用了脚本，请隐藏div。

只要div可用，就可以在onload事件中完成。

document.getElementById("divId").style.display = "none";

相反，更好的选择是使用css：

#divId {
   display : none;
}

4）调整DIV（）的大小

document.getElementById("divId").style.width = "440px";

5）再次显示div

document.getElementById("divId").style.display = "block";

所以你的最终代码：

在css中隐藏div。

window.onload =  function() {
      var divEle = document.getElementById("divId");
      divEle.style.width = "440px";
      divEle.style.display = "block";
}

如果禁用了javascript：

<noscript> 
  <style>
    #divId { 
        display: block;
     }
  </style>
 </noscript>

Answer 2

通过向body元素添加类，可以使用Javascript在呈现元素之前隐藏元素。首先添加一个CSS规则，如果正文具有特定的类，则隐藏div：

<style>
body.HideDiv #MyDiv { display: none; }
</style>

然后在body元素存在之后将类添加到它：

<body>
  <script>document.body.className='HideDiv';</script>

div存在后，您可以调整它并显示它：

<div id="MyDiv"></div>
<script>
var div = document.getElementById('MyDiv');
div.style.width = '200px';
div.style.height = '200px';
div.style.display = 'block';
</script>

如果未启用Javascript，则正文永远不会获取隐藏div的类，因此div将保持可见。

JavaScript在渲染之前更改div

2 个答案: