Question

我正在尝试这样的事情。但它根本没有帮助。我仔细检查了班级名称是否正确。任何帮助将不胜感激。

<script>
$(window).bind("load", function() {
for(var i=0, len=document.getElementsByClassName('xd_top_box').length;i<len;i++){
   document.getElementsByClassName('xd_top_box').style.display='inline-block';
}
});
</script>

我试图使用jquery，但随后将其与javascript混合使用。我认为jQuery更短更好。

Answer 1

首先，你有一个奇怪的JS和jQuery混合。如果你正在加载jQuery，你也可以使用它。其次，bind()已被弃用。您应该使用on('load', fn)代替。

最后一个问题是因为getElementsByClassName返回一个像object这样的数组，在更新每个元素的style.display之前需要迭代它。

试试这个：

$(window).on('load', function() {
  $('.xd_top_box').css('display', 'inline-block');
});

Answer 2

与Rory提到的一样，您希望使用$.on()而不是$.bind()，但如果您想使用原始JS，则只需要引用getElementsByClassName返回的每个元素的索引

＆＃13;

.xd_top_box {
  background: black;
  color: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(window).on("load", function() {
    var box = document.getElementsByClassName("xd_top_box");
    for (var i = 0; i < box.length; i++) {
      box[i].style.display = "inline-block";
    }
  });
</script>
<div class="xd_top_box">asdf</div>

＆＃13;

Answer 3

您可以使用$(document).ready()方法：

(function () {
    $(document).ready(function(){
        $('.xd_top_box').css('display', 'inline-block');
    });
})(jQuery);

并包含一个自闭包，以防止所有内容和变量泄漏到其他函数中。

页面加载后更改A类的CSS

3 个答案: