javascript初心者です。
svgの色をjavascriptによって変更しました。
しかし、スマホ時の縦横の向きを変更した際、アイコンの色がjsを充てる以前の色に戻ってしまいます。
問題が発生しているサイト
https://www.unfondsolaire.com
(スマートフォンでの閲覧をお願いいたします。)
スクロールすると、下に固定ナビが出現します。アイコンの色がオレンジ色になっていると思いますが、スマホを横にし、その後再度縦にすると、アイコンの色がsvg本来の色(黄緑)に戻ってしまいます。その状態で再度スクロールすると、アイコンの色はオレンジ色に戻ってくれるのですが、そもそも黄緑色に戻らないようにしたいです。
発生している問題・エラーメッセージ
該当のソースコード
javsScript
1 2<ul> 3 <li> 4 <a href="tel:000000000"> 5 <object id="tel" type="image/svg+xml" data="/wp-content/uploads/tel.svg" alt=""></object> 6 <span>TEL</span> 7 </a> 8 </li> 9 </ul>
javsScript
1 2function svgColor() { 3var tel = document.getElementById('tel').contentDocument; 4 var tel = $(tel); 5 tel.find('path').css('fill','#f27d15'); 6 } 7 8 $(window).load(function () { 9 svgColor(); 10 $(this).resize(function () { 11 svgColor(); 12 }); 13 }); 14
試したこと
リサイズ時に色が戻ってしまうのなら、resiveファンクションで
再度命令を出してやればよいと思い、上記コードを書きました。
ですが、うまくいきません。
稚拙な質問で申し訳ありませんが、どなたかアドバイスを頂けると幸いです。
よろしくお願いいたします。
補足情報(FW/ツールのバージョンなど)
検証スマートフォン:iphone 6s
ブラウザ:safari
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。