Question

我需要使用一段javascript来查找当前的css样式但是在打开div之前。

我的代码如下：如果我将它添加到实际div的开头（slidingDiv）

，这是有效的

但是，我需要它在div之前工作，因为它将用于控制显示哪个按钮。根据div是显示还是隐藏，会有不同的按钮显示。

非常感谢

皮特

<script>
if(document.getElementById('slidingDiv').style.display == 'none') alert('none');
else alert('show');
</script>

Answer 1

如果您的意思是需要在源代码中出现<div>之前编写JavaScript代码块，请将JavaScript附加到window.onload上来推迟JavaScript：

<script>
    window.onload = function() {
        if (document.getElementById('slidingDiv').style.display == 'none') {
            alert('none');
        }
        else {
            alert('show');
        }
    };
</script>
<div id="slidingDiv"></div>

如果你正在使用jQuery，那就更容易了：

<script>
    $(document).ready(function() {
        if ($('#slidingDiv').not(':visible')) {
            alert('none');
        }
        else {
            alert('show');            
        }
    });
</script>
<div id="slidingDiv"></div>

虽然最佳做法是将任何和所有JavaScript文件放在页面底部，以便您的页面首先加载内容，然后再加载任何渐进增强，否则您的使用必须等待页面完成加载正在加载任何奇特的JavaScript效果。

Answer 2

只需使用“display：none;”隐藏css中的两个按钮把你的代码放在你的slidingDiv和按钮下面。

你真正应该做的是寻找准备好的dom（然后你可以将你的javascript代码放在任何地方 - 当然它应该仍然在页面的底部）。

如果你不想自己编写domready并且不想在你的页面中包含jquery，那么有很聪明的domready实现，例如this

你会像那样使用它：

domready(function () {
  if (document.getElementById('slidingDiv').style.display == 'none') {
    alert('none');
  }
  else {
    alert('show');
  }
});

编辑：要将内容附加到您的HTML，您只需设置innerHTML

即可

domready(function () {
  var appendDiv = document.getElementById('someDivToAppend');
  if (document.getElementById('slidingDiv').style.display == 'none') {
    appendDiv.innerHTML('<p>hidden</p>');
  }
  else {
    appendDiv.innerHTML('<p>shown</p>');
  }
});

或者您可以使用document.createElement，appendChild - 方式

domready(function () {
  var appendDiv = document.getElementById('someDivToAppend')
    , newElement = document.createElement('div')

  if (document.getElementById('slidingDiv').style.display == 'none') {
    newElement.text = 'hidden';
  }
  else {
    newElement.text = 'shown';
  }
  appendDiv.appendChild(newElement);
});

使用MDN-DOCS！

在div出现在页面之前需要getElementById

2 个答案: