文字の幅の取得方法に付きまして

Question

htmlファイルに記載してあるaaaaaaaの文字列の幅を取得したいです。
javascriptでこのように記載すると0という数字が出てきてうまく取得ができません。
ネットで調べたらgetElementById()を使った手法は多く見られた。

(省略)
<p>aaaaaaa</p>
(省略)

var r = document.getElementById("id")[0].clientWidth;
console.log(w);

Comments

[maisumakun]

document.getElementsByTagName("p")[0]は、本当に<p>aaaaaaa</p>を指していますか？

[m.ts10806]

JavaScriptを質問タグとして追加してください。
あと、clientWidthはどこで参考にしましたか？

[m.ts10806]

ちなみに現状のコードだけだと「実行時の（ブラウザの）幅」が出ます。
0にはならなかったので、他のHTMLやcssが影響しているのでは？
getElementsByTagNameもgetElementByIdも取得結果がリストか要素単体かだけでそんな大きな違いはないです。

[despaine198]

https://www.w3schools.com/jsref/prop_element_clientwidth.asp

[m.ts10806]

あと「文字の幅」の定義を明確にされたほうが良いです。
どういう情報に対してどういう結果を求めたいのか。
clientWidthだと「要素の幅」になるので、ブラウザに対して100％の幅を持っていればブラウザの幅とイコールになり、中の文字は関係ない結果がでます。

[m.ts10806]

>https://www.w3schools.com/jsref/prop_element_clientwidth.asp

「要素の幅」です。そこからTry it Yourself ボタンで色々試せます。
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientheight
#myDIVのcssを調整して再度Run→Try itしてみてください。
あくまで要素の幅が返ってきます。「（私が文章から解釈している）文字の幅」にはなりません。

Answer 1

pはデフォルトではブロックレベル要素なので利用可能な全幅をとるはずです。
それが0になるということは、pのdisplayプロパティが変更されているのではないでしょうか
（おそらくinlineに）
望む結果を得るためには、pのdisplayプロパティを、幅が中身に合わせた大きさになるinline-blockに変える必要があると思います。

Comments

[despaine198]

それってCSS使わないといけない方法ですよね?

[itagagaki]

でも、冒頭で言ったことを繰り返しますが、0になっているということは、そもそもCSSが使われているのでは？そうでなければ全幅（親がbodyならbodyの幅）になるはずですので。

[m.ts10806]

追記・修正依頼でも書きましたが、
現状のコードだけだとitagagakiさんの仰っている通り「実行時の（ブラウザの）幅」が出ます（実証済み）。再現できる情報（ブラウザや環境も含めて）提示されないとこれ以上はアドバイス得られないかと。