0

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

我的代码如下：如果我将它添加到实际 div (slidingDiv) 的开头下方，这将有效

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

非常感谢

皮特

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

2 回答 2

2

<div>如果您的意思是您需要在源代码顺序中出现之前编写 JavaScript 代码块，则通过将其附加到以下位置来延迟 JavaScript window.onload：

<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 效果。

于 2012-12-20T12:46:03.910 回答
0

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

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

如果您不想自己编写 domready 并且不想在页面中包含 jquery，那么有非常聪明的 domready 实现，例如这个

你会这样使用它：

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 -way

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！

于 2012-12-20T12:52:52.180 回答