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

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

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

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

jQuery

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

Q&A

解決済

3回答

1055閲覧

要素の削除・復元をしたい

scoa

総合スコア66

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/05/28 02:19

編集2019/05/28 03:29

いつもお世話になります。

やりたいこと

1.画面幅が1040px未満の場合、画像を削除する
2.画面幅が1040px以上の場合、画像を元の位置に戻す(表示する)
※リアルタイムで実行したい(レスポンシブ対応)

現状

1はできましたが、2ができません。
記述もスマートでない気がしています…。

また、1のとき、HTML内からソースを完全削除したいのですが、
ブラウザの「ソース表示」から確認すると、残っています。
完全削除することは可能でしょうか。

HTML

1<div id="pc_only"> 2 <img src="https://placehold.jp/728x90.png"> 3</div>

jQuery

1// すぐ起動 2var w = $(window).width(); 3var x = 1040; 4 5if (w <= x) { 6 var d = $("#pc_only").detach(); 7} 8if (w >= x) { 9 $("#pc_only").append(d); 10} 11 12// リアルタイム起動 13$(window).resize(function(){ 14 var w = $(window).width(); 15 var x = 1040; 16 17 if (w <= x) { 18 var d = $("#pc_only").detach(); 19 } 20 if (w >= x) { 21 $("#pc_only").append(d); 22 } 23});

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

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

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

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

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

yasutomi

2019/05/28 03:02

1040px以下、1040px以上 だと、どちらも1040pxを含むため 1040px未満、1040px以上 の間違いの可能性がある気がしたのですが いかがでしょうか。
scoa

2019/05/28 03:29

ご指摘ありがとうございます。1040px未満、1040px以上です。
guest

回答3

0

※リアルタイムで実行したい(レスポンシブ対応)

なら、CSSでやるのが手軽ですし確実です。

CSS

1@media screen and (max-width: 1039px) { 2 #pc_only{ 3 display: none; 4 } 5}

(「HTML内からソースを完全削除したい」とありますが、それはなんのためでしょうか)

投稿2019/05/28 02:26

maisumakun

総合スコア145121

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

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

maisumakun

2019/05/28 02:29

なお、右クリックして「ソースの表示」から別タブを開いた場合、それはサーバから送信されたHTMLそのままになりますので、JavaScriptでの操作は影響しません。
scoa

2019/05/28 03:09 編集

早々にありがとうございます。 HTML内からソースを完全削除したいのは、社外の外部ソースを読み込むことになっており、見切れると違反対象になるため、見切れるタイミングで完全削除する必要があるためです。 ソースの表示の件、JS操作では影響しないのですね。 ということは「ソースの表示」で確認した際にソースが残っていても、実際はHTML内からは削除されている、ということでしょうか。
guest

0

ベストアンサー

ブラウザの「ソースを表示」で表示したくないということなので、一案を...

また、1のとき、HTML内からソースを完全削除したいのですが、
ブラウザの「ソース表示」から確認すると、残っています。
完全削除することは可能でしょうか。

これを実現するには、発想を逆にする必要があるかもしれませんね。

ページを開いた時点で 画像が入った HTML から 画像を消すのではなくて、ページを開いた時点の HTML には画像がない状態にしておいて、画面サイズが規定以上で画像を表示するときに JavaScript で画像を取得して表示するようにする必要があると思います。

投稿2019/05/28 04:05

編集2019/05/28 04:23
CHERRY

総合スコア25171

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

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

scoa

2019/05/28 06:07

完全削除したいソースが、JSを含んでおり、上手くいかず挫折しました。
scoa

2019/05/28 07:13

JSを別HTMLに入れて、iframeで読み込む形にしました。逆の発想も必要ですね。ありがとうございました。
guest

0

変数のスコープと、appendの対象の問題で、detachメソッドをうまく使えていないのが原因かと思います。

javascript

1// すぐ起動 2var w = $(window).width(); 3var x = 1040; 4var d; 5var parent = $("#pc_only").parent(); 6 7 8if (w <= x) { 9 d = $("#pc_only").detach(); 10} 11// 条件に、$("#pc_only")の存在有無を追加 12if (w >= x && $("#pc_only").length == 0) { 13 parent.append(d); 14} 15 16 17// リアルタイム起動 18$(window).resize(function(){ 19 var wInner = $(window).width(); 20 var xInner = 1040; 21 22 if (w <= x) { 23 d = $("#pc_only").detach(); 24 } 25 if (w >= x && $("#pc_only").length == 0) { 26 parent.append(d); 27 } 28});

detachした要素を全体で使えるようにするために、d変数を外に移したのと、
appendさせる対象($("#pc_only")の親です)を、parent変数に格納し、
その要素に、dの中身(detachした$("#pc_only")です)を入れるようにしました。
また、表示させるときに、$("#pc_only")が重複しないよう、
$("#pc_only")の存在有無も条件に入れるようにしています。

しかし、detachメソッド、便利ですね。

あと、maisumakunさんと同様に、desplay: noneではだめな理由とかあるのかは、私も疑問になりました。

投稿2019/05/28 02:36

編集2019/05/28 02:40
miyabi_takatsuk

総合スコア9528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問