話題の人物YouTubeまとめ&雑記雑感雑多ログ

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行目も不要です。

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

関連記事

画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 HTMLの静的ファイルにパラメータ(引数)を受け渡す最短スクリプトコード 2018.05.01 画像ファイルが見つからない場合に代替画像を表示 2018.05.01 テキストエリアのカーソル位置にボタンクリックで指定文字を挿入 2018.05.01 複数のアイテムをランダム表示(重複なし)する方法 2018.05.01

雑記雑感雑多ログ

タイ・シルバーの新芽2本目を確認 2018.05.12 画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 格闘技イベント「RIZIN」での衝撃KOシーン!堀口恭司vsイアン・マッコール 2018.05.09 広告収入で賄う無料タクシー「nommoc/ノモック」とは!? 2018.05.08 これって…そのためのTシャツ!?ポケットティッシュをスマートに出せるアイデアTシャツ 2018.05.07 ゴールデンウィーク明けの仮想通貨動向 2018.05.07 プロレスの登場シーンをかっこ良く決めるつもりが、張り切り過ぎてしまった結果・・・ズッコケ名シーン。 2018.05.05 新サイト「CCindex/仮想通貨・暗号通貨まとめ」リリース! 2018.05.04 指定ディレクトリ(フォルダ)内の画像ファイルを抽出してランダム(重複なし)に表示させる最短コード 2018.05.01 最低覚えておきたいチャートの見方 2018.05.01

PR

【CCindex】仮想通貨・暗号通貨まとめ