在頁面加載後更改A類的CSS

我正在嘗試這樣的事情。但它根本沒有幫助。我再次檢查了班級名稱是否正確。任何幫助將不勝感激。在頁面加載後更改A類的CSS

<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更短，更好。

來源

2017-05-04 Malik Junaid Rasheed

首先，你有一個奇怪的混合JS和jQuery。如果你正在加載jQuery，你可以使用它。其次，bind()已被棄用。您應該改用on('load', fn)。

最後這個問題是因爲getElementsByClassName返回一個類似於對象的數組，您需要在更新每個單獨元素的style.display之前進行迭代。

試試這個：

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

來源

2017-05-04 16:03:48

非常感謝您提供寶貴的答案。有效。再次感謝您的專業知識:) –

沒問題。如果有幫助，請不要忘記接受答案 –

像羅裏提到，要使用$.on()代替$.bind()，但如果你想使用原來的JS，你只需要引用由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>

來源

2017-05-04 16:07:20

感謝您的解釋。 –

@MalikJunaidRasheed不客氣。 –

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

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

，包括自閉把一切都包含的，變量泄漏到其他功能。

來源

2017-05-04 16:11:08

在頁面加載後更改A類的CSS

回答

相關問題