【jQuery】overflow:hidden;ではみ出た幅をscrollWidthで取得する方法

作成日： 2019年11月8日

幅を固定値で指定して、はみ出したエリアを含む全体の幅をjQueryで取得する場合、少し通常とは異なる手段が必要とのことです。

jQuery的なお作法なら、

JavaScript [1]
var w = $('.element').scrollWidth;

のようなイメージなのですが、実際は

JavaScript [2]
var w = $('.element').get(0).scrollWidth;

となるようです。

The offsetWidth, scrollWidth,ClientWidth Property is not working for Html Element https://stackoverflow.com/questions/26887264/the-offsetwidth-scrollwidth-clientwidth-property-is-not-working-for-html-elemen

I am having this control and trying to get the offsetWidth,clientWidth and scrollWidth.. <span class="label-block" style="height: 19px; text-overflow: ellipsis; overflow: hidden; white-space: ...

実装サンプル

CodePenでコンソールにはみ出した幅を出力するように設定していますのでご確認ください。
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
【WordPress】メモ：日付フォーマットでdate_i18nを使うと'F'フォーマットは無効化される
次の記事 ➡
【Bootstrap】Like / Dislikeをトグルボタンで実装する

関連投稿

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。