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

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

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

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

Q&A

解決済

1回答

2793閲覧

スクロールしたら、クラスを追加する実装をしたいのですが、追加できない

KK0618

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2020/07/01 13:04

編集2020/07/01 13:45

JSでクラスを指定したい

スクロールしたら、JavaScriptで該当する要素にクラスを追加することを実装しています。

発生している問題

しかし、全くクラスが追加されず、クラス名のミスなどのスペルミスを探しましたが、解決できませんでした。

該当のソースコード

express というクラス名のついた要素に show という要素を追加したいと思っています。要素はimgです。

Javascript

1 <script> 2 var scrollAnimationElm = document.querySelectorAll(".express"); 3 console.log(scrollAnimationElm); 4 var scrollAnimationFunc = function(){ 5 for(var i = 0; i < scrollAnimationElm.length; i++) { 6 var triggerMargin = 300; 7 if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) { 8 scrollAnimationElm[i].classList.add('show'); 9 } 10 } 11 } 12 window.addEventListener('load', scrollAnimationFunc); 13 window.addEventListener('scroll', scrollAnimationFunc); 14 </script>

html

1<body class="container"> 2 <script> 3 var scrollAnimationElm = document.querySelectorAll(".express"); 4 var scrollAnimationFunc = function(){ 5 for(var i = 0; i < scrollAnimationElm.length; i++) { 6 var triggerMargin = 300; 7 if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) { 8 scrollAnimationElm[i].classList.add('show'); 9 } 10 } 11 } 12 window.addEventListener('load', scrollAnimationFunc); 13 window.addEventListener('scroll', scrollAnimationFunc); 14 </script> 15 16 <main class="main"> 17 <div class="profile"> 18 <img class="profile_img" src="画像のリンク"> 19 <div class="profile_content"> 20 <p class="profile_name">名前</p> 21 </div> 22 </div> 23 <div class="history_gackground"> 24 <h3>〜地域編〜</h3> 25 <div class="sized_img express--up express"><img src="画像のリンク"></div> 26 <img class="sized_img express--up express" src="リンク"> 27 <img class="sized_img express--up express" src="リンク"> 28 </div> 29 <div class="history_gackground"> 30 <h3>〜地域編<img class="kuma_img" src="リンク"></h3> 31 32 <img class="sized_img express--up express" src="リンク"> 33 <img class="sized_img express--up express" src="リンク"> 34 </div> 35 <div class="history_gackground"> 36 <h3>〜地域編〜</h3> 37 <img class="sized_img express--up express" src="リンク"> 38 <a href="別サイトへのリンク"><img class="sized_img express--up express" src="リンク"></a> 39 <img class="sized_img express--up express" src="リンク"> 40 <img class="sized_img express--up express" src="リンク"> 41 <img class="sized_img express--up express" src="リンク"> 42 </div> 43 </main> 44 45</body> 46

css

1.container{ 2 max-width: 1200px; 3 margin: 0 auto; 4 padding: 0px; 5} 6.main{ 7 width: 100%; 8} 9 10.sized_img{ 11 width:300px; 12 height:auto; 13 margin: 5px; 14 border-radius: 2px; 15 box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5), 10px 10px 0px 0 rgba(0, 0, 0, .5) inset; 16} 17.express{ 18 opacity: 0; 19 transition: all .5s ease; 20} 21.show{ 22 opacity: 1; 23 transform: none; 24} 25.express--up{ 26 transform: translate(0, 100px); 27} 28.kuma_img{ 29 height: 33.6px; 30} 31 32.history_gackground{ 33 /* background-color: #F8EFBA; */ 34 margin-top: 10px; 35 margin-bottom: 10px; 36 padding: 10px; 37} 38 39.profile{ 40 display: flex; 41 width: 500px; 42 margin: 0 auto; 43} 44.profile_img{ 45 width:300px; 46 height:auto; 47 margin: 5px; 48 border-radius: 150px; 49} 50.profile_content{ 51 position: relative; 52 top: 50px; 53 left: 30px; 54} 55.profile_name{ 56 font-weight: bold; 57 font-size: 24px; 58}

初歩的な質問で申し訳ありませんが、アドバイスを頂けますでしょうか。

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

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

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

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

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

m.ts10806

2020/07/01 13:25

html、CSSも提示してください。 「コピペで再現できる情報」が必要です。
KK0618

2020/07/01 13:37

承知しました。 >「コピペで再現できる情報」 以後、意識します。
m.ts10806

2020/07/01 13:38

えーっと、「今回は対応しない」ということですか? 質問は編集できるので、適宜対応してもらいたいんですが・・ そのためのこの「質問への追記、修正依頼」のコメント欄です。
KK0618

2020/07/01 13:47

ただ今、編集致しました。 言葉足らずで申し訳ありません。
guest

回答1

0

ベストアンサー

var scrollAnimationElm = document.querySelectorAll(".express");でexpressというクラス名のついた要素を取得しようとしていますが、この行は要素の準備が完了するより前に実行されているため要素が1つも取得できていません。

例えば以下のようにしてページのロードが完了した後にexpressというクラス名のついた要素を取得するようにしましょう。

javascript

1var scrollAnimationElm; 2window.addEventListener('load', function(){ 3 scrollAnimationElm = document.querySelectorAll(".express"); 4});

投稿2020/07/01 14:45

ku__ra__ge

総合スコア4524

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

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

KK0618

2020/07/01 15:53

ありがとうございます! うっかりミスでした^^; ご指摘して頂いた通りに修正しましたら、思った通りに動きました。 本当に助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問