jqueryで親要素の幅を取得（padding含めずに）

CSSの『@media screen ～』で任意のスタイルに変更すればいいのですが、Javascript等の『変数』を変更したい場合、CSSだけでは対応できません。その場合は、Javascriptで要素の幅を取得して対応させます。

ただし（私が知らないだけかもしれませんが…）Javascriptだけでは『border』や『padding』を含めた幅を取得するようですので、その分の幅を+-計算調整しなくてはならないのですが、jqueryを使えばいとも簡単に実寸を取得できます。

jqueryの、width()は、親ボックスの『padding』を含めないため、実際の領域幅が取得できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="widthCheck" style="clear:both;width:100%;height:0px;"></div>
<script>
var width = $('#widthCheck').width();
if (width > 500){
var hoge = "幅500px以上の動作";
}
else if (width > 300){
var hoge = "幅300～500pxの動作";
}
else{
var hoge = "幅300px以下の動作";
}
document.write('#box幅は、' +width+ 'pxですので、' +hoge+ 'を実行します。');
</script>

• 1行目は、GoogleにホストされているjQueryファイルを読み込んでいますが、既にhead内で読み込んでいる場合は不要です。
• 要素にidが振ってあれば、4行目『#widthCheck』を親要素のid名にすれば2行目も不要です。

この仕組みを利用すれば、表示領域に合わせて広告サイズを切り替えるなどに使えますね。

	JavaScript
	2019.07.06 07:08
	2019.07.12 07:06

Related entry

Pickup entry

• BACK
• NEXT