ページ読み込み後のAクラスのCSSの変更

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はオブジェクトのような配列を返し、各要素のstyle.displayを更新する前に反復処理する必要があるためです。ロリーが言及した同様

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

Answer 2

は、あなたの代わりに$.bind()の$.on()を使用したいが、あなたのオリジナルの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>

Answer 3

$(document).ready()方法：

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

およびその他の機能の中に漏れ出す含まれるすべてのものと変数を保つために、自己閉鎖が含まれます。