CSSメディアクエリでdisplay:noneが使えないケースで質問させてください。
・JavaScriptでアクセス元の画面サイズを取得し、
・CSSメディアクエリのように900px以下なら<img src="1.jpg">を非表示、
・900px以上なら<img src="1.jpg">を表示、
のようにHTMLタグをコントロールしたいです。
JavaSctiptはdocument write()位しかわかりません。
どなたかご存知の方がいらっしゃったら教えて頂けませんでしょうか。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
前にどこかのサイトで書かれていたものの受け売りですが。
。。// ここから
var w = window.innerWidth;
var x = 900;
if( w <= x) {
viewtype = 'sp';
} else {
viewtype = 'pc';
}
// ここまで
あとは目的の場所に書き込めばOKだと思います。
たぶん。
ありがとうございました。教えて頂いたものを下のようにして実現することができました。
<script>
var w = window.innerWidth;
var x = 900;
if( w <= x) {
document.write("<img src="1.jpg">");
} else {
document.write("");
}
</script>
間違っているのかもしれませんが・・・(^_^;)
とても助かりました!
No.1
- 回答日時:
>CSSメディアクエリでdisplay:noneが使えないケースで質問させてください。
はなぜ??
小さなディスプレイとなると、スマホかフィーチャーホン、スマホはすべてmediaquery使えるでしょうし、フィーチャーホンでしたらmedia="handheld"が使えるはずですけど。
この回答への補足
ご質問ありがとうございます。
理由は、display:noneで表示をコントロールすることが制限されているコードを記述するためです。
(1ページのHTMLあたりの記述回数に制限があるコードで、こちらでは簡易的にimgタグを例としました)
宜しくお願い申し上げます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数の画像の中から複数の画像...
-
imgのsrcに値を設定するには
-
window.openで値の渡し方を教え...
-
JAVAで画像をボタンで切り替え...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
jQueryで同じクラス名のものを...
-
createElementで作成した要素を...
-
jQueryでのドラッグアンドドロ...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
HPに複数の画像をクリックで切...
-
【javascript】ロールオーバー...
-
画像の入れ替え
-
javascriptによるランダム画像...
-
画像と文字を同時に切り替えたい
-
JavaScriptで画像置換えてクリ...
-
連続したURLへのwindow.openの...
-
リンク切の場合リンクしない
-
戻り読みの代わりとなる正規表...
-
複数のボールの落下、バウンド...
-
<img>タグの alt= の値をキャプ...
おすすめ情報