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ランキング
-
クリックで次の画像へ
-
javascriptテキストBOX色を元に...
-
テキストエリア内の一部の文字...
-
フッターの下に隙間ができてしまう
-
HTMLですCSSです この画像のよ...
-
背景色と連動するスライドショ...
-
スライドショー「Skitter」をカ...
-
1枚の画像をクリックすると複数...
-
web制作(HP作成について教えて...
-
textareaに画像を表示したい
-
HTMLタグに複数のクラスを設定...
-
スワップイメージのフェード方...
-
アコーディオンメニューが開い...
-
サムネイルにカーソルを合わせ...
-
大量のチェックボックス状態取...
-
pythonで、tkinterとpillowの組...
-
createElementが一瞬で消えてし...
-
ブラウザで表示されている罫線...
-
MAX関数を使ってからLEFT JOIN...
-
[W3C]フラッシュ画像について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
JavaScriptで画面サイズによっ...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
インラインフレームでのクッキ...
-
setAttributeによる画像の差し替え
-
【jQuery】複数の画像の読み込...
-
JAVAで画像をボタンで切り替え...
-
画像の座標位置取得
-
連番画像「次へ」「前へ」で、...
-
imgのsrcに値を設定するには
-
画像をクリックすると別ウイン...
-
複数のボールの落下、バウンド...
-
連続したURLへのwindow.openの...
-
JavaScriptで画像置換えてクリ...
-
<img src"○.jpg">の○をランダム...
-
スライドショーにフェード効果...
-
jQueryで画像を重ねる
-
クリッカブルマップでリモート...
-
複数のバナーをリロードする度...
おすすめ情報