先日、JavaScript や jQuery で div要素の width や height の設定をしていてトラブった。
JavaScript や jQuery で div要素の width や height の設定する操作は、もう何百回もやって来ているので、そんな初歩的な操作でウッカリミスをするとは思わなかった。
以下、その備忘録。
では本題に入ろう。
ピクセル単位でwidthを指定したい場合
$('#divID').width(300); // width(300)で幅が300pxに広がる
$('#divID').width('300px'); // これでも良い
$('#divID').css('width', '300px'); // これでも良い
document.getElementById('divID').style.width = '300px'; // これもOK
document.getElementById('divID').style.width = '300'; // これは効かない
こんなふうにすれば良いだろう。
なお、jQueryで今でも混乱するのだが、prop() や attr() と言う似たようなメソッドがある。
$('#divID').prop(・・・);
$('#divID').attr(・・・);
width や height の取得や設定に関しては、これらの prop() も attr() も使わない（ようだ）。
パーセント単位でwidthを設定したい場合
このあたりで混乱した。
と言うのは、今回、以下の様にして、divの幅を100%にしたかったのだが、何故か効かない。
$('#divID').width('100%'); // これはダメなの？
ワテの記憶が定かでは無いのだが、このようにするのは間違いだったっけ？
昔は出来ていたような気もするが確証は無い。
ところが、厄介なのはjQueryの場合には、出来ない場合にもエラーメッセージが出ないので、上手く行ったと錯覚してしまう。
でも、上の手法では100% になっていないようだ。
追記※ その後、効くようになった。効かなかった理由は原因不明。
で、jQueryでやるんなら、
$('#divID').attr('width', '100%');
$('#divID').css('width', '100%');
などかな。
でも、一番確実なのは、JavaScript方式で
document.getElementById('divID').style.width = '100%';
が良さそう。
attr()でstyle属性を設定するのは使わないほうが良いと思う
$('#divID').attr('style', 'width:100%');
確かにこのようにstyle属性を設定しても良いのだが、こうすると文字通りstyleがwidth:100% の設定になる。
そうすると、実行前に仮に他のstyle属性がインラインでdivIDに設定されていたとしても、全部除去されて style=”width:100%” のみの設定になってしまう。
例えば、
<div id="divID" style="display:flex;width:200px;">・・・</div>
の状態の divID に対して、上のjQueryを実行したとすると、
<div id="divID" style="width:100%">・・・</div>
の状態になり、display:flex 設定が無くなってしまうのだ。
まあ、確かにその通りなのだが、気づくのに一時間くらい掛かってしまい、もう訳分からん状態になってしまった。
本来は、このflex属性を使って整列させようと思った要素が全く整列しない。おかしい。。。
一時間くらい悪戦苦闘して気づいたのだ。
なお、CSSファイル設定でdivに指定されている属性は消えない。消えるのはあくまでdivにインラインでstyle指定されている属性だ。
なので、この $(‘#divID’).attr(‘style’, ‘設定値’ ) 方式を使うと何かと混乱の元なので使わないのが良いだろう。
heightやwidthが取れない場合
今までの例では、要素のheightやwidthを設定する場合の話題であった。
では、逆に、要素のheightやwidthを取得する場合を紹介しよう。
良く経験するのが、heightやwidthを取得しても、何故かゼロになったりあるいは取得出来なかったりする場合がある。
heightが取れない場合はoverflow: hiddenをセットしてみる
良く知られている例としては、場合によってはdiv要素のheightが取得出来ない問題がある。
この記事でも紹介した。
この記事を要約すると、
divの中に入れた要素がfloat指定されていると、それはdivの高さに影響を与えないのでdivの高さが0になるのだ。
対策としては、divの属性に
overflow: hidden;
などを追加すると高さが得られる。
heightやwidthがJavaScriptでは取れないがjQueryなら取れる
今日、久しぶりににJavaScriptでプログラミングをしていて、何故かdiv要素のheightやwidthが取れない。
var h = document.getElementById('divID').style.height;
alert('h= ->' + h + '<-');
を実行すると、何故か空文字列が表示されるのだ。
同じく、widthも試してみたがそちらも空文字列だった。
var w = document.getElementById('divID').style.width;
alert('w= ->' + w + '<-');
原因不明だ。
良くやる失敗としては、.style.width とすべき所をstyleを付け忘れて .width としていたなんて言うのがあるが、そんな失敗もしていないのにheightもwidthもどちらも空文字列になるのだ。
var h = document.getElementById('divID').style.height; // 正しい
var h = document.getElementById('divID').height; // 間違い undefinedになる
念のためにブラウザーでF12押下してそのdivをクリックしてみると、確かに大きさを持っているにも関わらず、値が取れない。
もう訳分からん。
で、jQueryで試してみたら、難なくheightやwidthの値が取れるぞ。
var h = $('#divID').height(); // 小数点になる
h = parseInt(h, 10);
alert('h= ->' + h +'<-');
上のようにjQueryでhegtht() を実行すると、何の問題も無く簡単に高さが取得出来る。
ただし小数点で値が帰るので、必要ならparseInt()関数を使って整数化すると良い。
いずれにしても、何故JavaScriptではheightもwidthも空文字列になるのかは不明だ。
そう言う時にはjQueryを試してみると良い。
原因が判明したらここに追記したい。
widthセット結果がJavaScriptとjQueryで異なる謎
先日、奇妙な症状に遭遇した。
<pre id="preID"> ・・・ ・・・ ・・・ </pre>
このようにpreタグで作成した何の変哲もないpre要素に対して、widthをセットしたのだがJavaScriptとjQueryで異なる結果になるのだ。
preJQ = $('#preID');
//jQuery方式でwidthをセット
preJQ.width(800); //何故か縦スクロールバー幅16がwidthに加算されて816になる
//JavaScript方式でwidthをセット
preJQ.get(0).style.width = 800 +'px'; // 期待通り 800になる
document.getElementById('preID').style.width = 800 +'px'; // これでも良い
何故か分からないのだが、jQuery方式でwidthをセットした場合には、ブラウザーで表示してF12でpreのwitdhを確認すると、800pxと指定しているにも関わらず816pxになっているのだ。
画面上でも確かに816pxの幅になっている。
その余分な16pxは何かなあと調べたら、それは縦スクロールバーの幅だった。
でも現状ではpre域には縦スクロールバーは出ていない。それにもかかわらず、jQuery方式では、その縦スクロールバーの幅を勝手に追加して816pxにセットしているのだ。
おかしい。原因不明だ。
そこで、試しにJavaScript方式でやってみたら、何の問題も無く800pxにセット出来るし。
と言う事で、当件は原因は良く分からないままだが、JavaScript方式でやれば上手く行くので、取り敢えずそうしている。
まとめ
div要素などの width や height を設定する場合には、ワテのお勧めは以下の通り。
width/heightをピクセルで指定する場合
$('#divID').width(300); // これでも良い
$('#divID').width('300px'); // これでも良い
$('#divID').css('width', '300px'); // これでも良い
document.getElementById('divID').style.width = '300px'; // これでも良い
document.getElementById('divID').style.width = '300'; // これは効かない
width/heightをパーセントで指定する場合
$('#divID').attr('width', '100%');
$('#divID').css('width', '100%');
document.getElementById('divID').style.width = '100%'; // これがお勧め
結局width/heightを指定するならピクセルでもパーセントでもお勧めはこれ
document.getElementById('divID').style.width = '〇〇px'
document.getElementById('divID').style.width = '〇〇%'
document.getElementById('divID').style.width = 'calc(100% - 20px)';
が良さそう。pxか%かどちらかの単位を付ける必要がある。単位を省略して数字だけだと効かないので注意が必要だ。
また三番目の例のようにcalc()を使う事も出来る。注意事項としては、プラスやマイナスの演算子の前後には半角スペースを入れる必要がある。
document.getElementById('divID').style.width = 'calc(100%-20px)';
だと、上手く行かない。
以上、あくまでワテの調査結果です。
コメント