次のhtmlがあるとします。
...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...
すべてのthingerdivの幅を動的に設定したいと思います。私はこのようにそれを行うことができることを知っています：
$(".thinger").css("width",someWidth);
これにより、次のようなhtmlが作成されます。
<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>
結果のHTMLを次のようにしたいと思います。
...
<style>
.thinger {
width: 50px;
}
</style>
...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...
周りを見回しましたが、既存のcssクラスを追加/更新/変更するためのjQueryユーティリティが見つかりませんでした。これは存在しますか？
次のようなものを使用して手動で追加できることを知っています。
var styleElement = document.createElement('style');
styleElement.type = "text/css";
styleElement.innerHTML = ".thinger {width:" + maxWidth + ";}";
document.getElementsByTagName('head')[0].appendChild(styleElement);
しかし、私はブラウザの不整合に対処する必要はなく、「jQueryの方法」で物事を実行していることを確認したいと思います。どちらか一方の方法を選択する理由はありますか？
style要素を作成headして、DOMの他の要素と同じようにに追加できますが、時間の無駄です。
使用するのに最適な方法は、スタイルシートでクラスルールを設定し、それらの要素にクラスを追加することです。これにより、関心の分離がより適切に維持され、コードの再利用と後のメンテナンスの両方に役立ちます。
実行前の幅がわからないため、スタイルシートでクラスルールを設定できません。
この場合、現在使用している方法がcss()最善の方法です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加