Changing CSS of A class after page loading

Question

I am trying something like this. But it is not helping at all. I double checked that class name is correct. Any help will be appreciated.

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

I was trying to use jquery but then mixed it up with javascript. jQuery is shorter and much better I think.

score 2 · Answer 1 · answered May 04 '17 at 16:03

2

Firstly you have an odd mix of JS and jQuery. If you're loading jQuery you may as well use it. Secondly, bind() has been deprecated. You should use on('load', fn) instead.

Lastly the issue is because getElementsByClassName returns an array like object which you need to iterate over before updating the style.display of each individual element.

Try this:

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

answered May 04 '17 at 16:03

Rory McCrossan

331,213
40
305
339

Thank you so much for your valuable answer. It worked. Thanks for your expertise once again :) – Malik Junaid Rasheed May 04 '17 at 16:09
No problem. Don't forget to accept an answer if it helped – Rory McCrossan May 04 '17 at 19:18

score 0 · Answer 2 · answered May 04 '17 at 16:07

Like Rory mentioned, you want to use $.on() instead of $.bind() but if you wanted to use your original JS, you just need to reference the index of each element returned by getElementsByClassName

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

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

Thanks for the explanation. – Malik Junaid Rasheed May 04 '17 at 16:15 — Malik Junaid Rasheed, May 04 '17 at 16:15
@MalikJunaidRasheed you're welcome. – Michael Coker May 04 '17 at 16:18 — Michael Coker, May 04 '17 at 16:18

score 0 · Answer 3 · answered May 04 '17 at 16:11

You can use the $(document).ready() method:

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

And include a self closure to keep everything contained and variables from leaking out into other functions.

Changing CSS of A class after page loading

3 Answers3