🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1005閲覧

jsからのサイズ変更が効きません

pecchan

総合スコア591

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/19 03:58

編集2021/01/19 04:02

CSS,jQueryともに初心者です。
的はずれな質問してたら申し訳ございません。

前提・実現したいこと

画像のアップロードとプレビューを作ってるところです。
「メルカリ」の出品ページのイメージです。

イメージ説明

発生している問題・エラーメッセージ

画像のアップロード時に、カメラアイコン部分をリサイズしたいのですが、その指定が効きません。

アップロード前
イメージ説明

アップロード後
イメージ説明

カメラアイコンが下に移動した理由は、全体をflexにしており、
追加された画像の横幅分だけアイコン横幅からマイナスしてるのですが、それが効かずこのようになったと思います。

該当のソースコード

html

1<div style="width: 500px;"> 2 <ul class="horizontal-img-list" > 3 <li> 4 <label class="upload-img camera-width" > 5 <div class="upload-img__inner"> 6 <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;"> 7 <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" > 8 <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path> 9 </svg> 10 <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p> 11 </div> 12 </label> 13 </li> 14 </ul> 15</div> 16 17<script type="text/javascript" src="/js/item/add_image.js"></script> 18

css

1.camera-width { 2 width: 500px; 3} 4 5.upload-img { 6 cursor: pointer; 7 display: block; 8} 9 10.upload-img__inner { 11 place-content: center; 12 -webkit-box-align: center; 13 -webkit-box-pack: center; 14 background-color: rgb(245, 245, 245); 15 border: 1px dashed rgb(204, 204, 204); 16 //width: 100%; 17 height: 150px; 18 display: flex; 19 align-items: center; 20 flex-wrap: wrap; 21 flex-direction: column; 22 text-align: center; 23} 24 25

javascript

1$(document).on('click', '.upload-img', function() { 2 $('.upload-img').off('click'); 3 4 $('.upload-img__inner__input').off('change'); 5 $('.upload-img__inner__input').on('change', function (e) { 6 7 // ファイル未選択なら処理を抜ける 8 c = $('.upload-img__inner__input').val().length; 9 if(c==0){ 10 return; 11 } 12 13 // 画像プレビュー 14 let reader = new FileReader(); 15 reader.readAsDataURL(e.target.files[0]); 16 let list_item = $(`<li class="horizontal-img-list__item"> 17 <div class="image-trim"> 18 <img> 19 </div> 20 <div>削除</div> 21 </li>`); 22 reader.onload = function(e){ 23 $(list_item).find('img').attr('src', e.target.result); 24 } 25 $('.horizontal-img-list li:last-child').before(list_item); 26 27 $('.horizontal-img-list').find('p').remove(); 28 29 30 // inputボタンリサイズ 31 let $imgs = $('.horizontal-img-list').find('.image-trim'); 32 33 $('.camera-width').css({ 34 'width': 'calc(100% - (20% * ${$imgs.length}))' 35 }) 36 37 38 39 40 }) 41});

直接<input>にサイズ指定しない理由

label(upload-imgクラス)配下はコンポーネントとして再利用する目的があり、
<input>タグや、upload-img__innerクラスに具体的なサイズ指定を置きたくありません。
なので、上位にサイズ指定用のcamera-widthクラスを追加しました。

codepn

コードペンを用意してみました。
codepen

どうすればjs側からサイズ変更できるでしょうか?
先輩方教えて下さい。宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

javascript

1 $('.camera-width').css({ 2 'width': 'calc(100% - (20% * ${$imgs.length}))' 3 })

一番目の問題はここでバッククオートではなくシングルクオートを使っているので${}が展開されず無視されていることでしょう。

ここを直しても、.camera-width の親ボックスのwidthが指定されていないので、パーセント値のwidthはけっきょく無視されます。

投稿2021/01/19 04:36

編集2021/01/19 04:37
int32_t

総合スコア21679

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

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

pecchan

2021/01/19 05:21

2つ問題があったのですね!親にwidth指定したらできました! 自分ひとりでは解決出来ませんでした。 有難う御座います!!
guest

0

javascript

1 $('.camera-width').css({ 2 'width': 'calc(100% - (20% * ${$imgs.length}))' 3 }) 4

javascript

1 $('.camera-width').css({ 2 'width' : 'calc(100% - (20% * ' + $imgs.length + ' )) ' 3 })

こう直したらどうでしょうか?

投稿2021/01/19 05:14

moromon

総合スコア86

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

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

pecchan

2021/01/19 05:23

有難う御座います!そのようにさせていただきました! moromon様にもベストアンサー送りたいです。申し訳ございません。 ※早かったもう1人の方に送らさせていただきました。どうかご了承下さい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問