質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2097閲覧

jQueryで、スクロールバーの幅を測りたい(ただし、bodyの内側のスクロールバーです)

bananna

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/07/02 05:57

編集2019/07/02 05:58

前提・実現したいこと

jQueryを使っています。ご意見、ご回答宜しくお願い致します。

「button」のクリック

「.outer」のスクロールバーの幅を測り、

「.target」にその幅でボーダーを加えたい

のですが、どうしたらいいでしょうか?

html

1<button>button</button> 2 3<div class="outer"> 4 <div class="target">target</div> 5</div>

css

1body { 2 overflow: hidden; 3 margin: 0; 4 padding: 0; 5} 6.outer { 7 background: springgreen; 8 width: 100%; 9 height: 200px; 10 overflow-y: scroll; 11} 12.target { 13 background: sandybrown; 14}

###試したこと
イメージとして下記の流れになると思います。
もちろん下記は「.outer」でなく「body」の幅が対象になっているのでできないのですが…
どのようにすればいいでしょうか?

jQuery

1$( function(){ 2 $( 'button' ).click( function(){ 3 $( '.target' ).css( "border-right", "solid "+( window.innerWidth-document.body.clientWidth )+"px red" ); 4 }); 5}); 6

よろしければお試しくださいまし → https://jsfiddle.net/qb4zyamu/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

図のように、offsetWidth から clientWidth とボーダー幅を引けば出ます(リンク先参照)。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth

jQuery

1 var outer = $('.outer')[0]; 2 var style = getComputedStyle(outer); 3 var result = outer.offsetWidth - (outer.clientWidth + parseInt(style.borderLeftWidth, 10) + parseInt(style.borderRightWidth, 10)); 4 $('.target').css('border-right-width', result);

jQuery なら .innerWidth() から clientWidth を引くだけです。

jQuery

1 var result = $('.outer').innerWidth() - $('.outer')[0].clientWidth;

https://api.jquery.com/innerWidth/

投稿2019/07/02 07:10

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bananna

2019/07/02 10:33

どうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問