Javascript でメディアタイプをどのように判断しますか?

https://stackoverflow.com/questions/494235

20-08-2019
|

質問

周りを見回しても、この質問はまだありませんでした。

Javascript でメディアタイプを判断する信頼できる方法は何ですか (例:画面、印刷、ハンドヘルド) ページの? への参照を見てきました document.styleSheets[0].media, しかし、ブラウザのサポートの問題か、私が何かを理解していないため、これを使用するのはうまくいきませんでした。

画面ビューではJavaScriptによって何かを非表示にするが、印刷ビューでは非表示にしたいので質問しています。Prototype を使用して要素のトグルスイッチを実行しているため、これを行うためにメディア依存のスタイルに依存することはできません。Prototype では、要素が非表示と宣言されている場合、要素を表示に切り替えることはできません (display: none) 非インライン CSS* を使用します。要素にメディア固有のインラインスタイルを設定しようとしました (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">）しかし、私が知る限り、それはサポートされていません。

スタイルシートを循環して、印刷固有のリンクスタイルシートがアクティブかどうかを確認できることはわかっていますが、現在、さまざまなメディア固有のスタイル宣言が 1 つのリンクスタイルシート内に混在している状況にあります。だからそれはダメだよ。はい、スタイルシートをさまざまなメディアタイプに分割することはできますが、まず Javascript を使用して DOM からメディアタイプを確実に取得できるかどうかを判断したいと思います。 CSS から完全に独立した. 。ああ、それから、「印刷ビューの要素を非表示にし、それが Javascript で表示されるかどうかを確認する」というトリックを試してみましたが、その結果、常に (印刷プレビューをロードするときに) Javascript が本来の要素を判断してしまいました。非表示の要素は表示され、指示された DOM 操作を実行します。 にもかかわらず それらの要素が そうではありません 見える。ここで私が話していることについてもっと詳しく知りたい人がいたら、編集で詳しく説明します。

※このことが私には理解できず、いつもイライラしています。それについて何らかの洞察を提供できる人は誰でも、私から大きな賛成票を獲得します。

解決

[..]、プロトタイプは、それが見えない（display: none）に宣言された場合、要素は、非インラインCSSで可視に切り替えることを許可しません。これは私が理解してによって常にイライラしていなかったものです。その中に任意の洞察力を提供することができます誰もが私から大きなupvoteを取得します。

あなたはおそらくすでにこのしかし、例えばのためのマニュアルを見て show の状態（同じ音符を持つ他の関連する機能がある）は：

Element.show のことはできませんのCSSスタイルシートを経由して隠された表示要素。これはプロトタイプの制限なく、CSSのdisplayプロパティがどのように動作するかの結果ではないことに注意してください。

だから、それは既知の問題だと、彼らはCSSを非難します。しかし、（これは、ロードするDOMのを待つための推奨方法であれば、私は前にプロトタイプを使用していないので、私はわからないんだけど、それが動作しているようです）、次のドキュメントを考えてみます：

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

あなたが既に知っているように、これは、動作しません。どうして？さて、どのように自分自身をdisplayするp#victimを伝えるときにshowプロパティを「リセット」するために知っているプロトタイプを作成しますか？（言い換えれば：displayはdisplay: noneセレクターとルールセットには存在しなかった場合、それは見つけることができる方法p#victimの値となっているべきか。）答えは簡単である：それはできません。（第2のためにそれについて考えてみよう。別のルールセットはdisplayの値を変更するだろう何場合display: noneはp#victimセレクタ？（つまり、私たちは常にpに設定すべきことであるが、例えばblockを想定することはできませんと私たちのルールセットには存在しなかった場合には、他のルールセットは、その値を変更している場合があります。）我々は、スタイルシート内のルールセットからdisplayプロパティを削除することはできません、それはように他のプロパティが含まれており、可能性があるため、我々は要素とルールセット間の接続全体を削除することはできません（）でこれを行うには、ののルールセットを見つけるために、私見、非自明であることが可能である場合でも。もちろん、私たちはこれで上に行くが、ない既知がない私の知る限りでしたこの問題へのソリューションを提供します。）

なぜインライン代替に動作しますか？まず、showがどのように実装されるかを見てみましょます：

show: function(element) {
  element = $(element);
  element.style.display = ''; // <-- the important line
  return element;
}

この機能はありません唯一重要なことは、element.style.displayから''を「削除」空の文字列（display）にstyleを設定することですAfaict。すばらしいです！しかし、それは何を意味するのでしょうか？なぜ我々はそれを削除したいです！まず、実際に表していると私たちはその値を変更したときに変更element.style何かを見つける必要があります。

element.style のMDCのドキュメントでは、ということを述べて

は、要素のstyle属性を表すオブジェクトを返します。

の属性の

最後の言葉に注意してください。要素のelement.style≠現在の「計算された」スタイル、それは（長い/より良い説明のためのMDCを参照してください）style属性のプロパティのリストだけです。

次のドキュメントを考えてみます：

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<p id="victim" style="display:none;">Hello world!

style="display:none;"はp#victimを隠しますが、DOM仕上げローディングプロトタイプは、それがstyle=""に変わります、そしてブラウザがdisplayプロパティ（この場合はブラウザのデフォルトスタイルシートから値）の値を再計算する時期ます。

でもの、次の文書を検討します：

を

<!doctype html>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

jQueryのは、スタイルシートがとにかくこの場合には、正しく詰め込むハンドル！これは、プロトタイプ・ソリューションとして説明することほど簡単ではありませんし、私が今を通読する素晴らしさを多くの層にある、とjQuery Fケースが多いです不振の解決策displayの正しい値を計算します。（クイック最後のノート：Firebugのは...、私はそれがいくつかのFirefoxの排他的なものか何かを使用していますね。）

他のヒント

編集：ごめんなさい（自分用メモ：RTFQ ロブ、まったく！）。簡単にグーグル検索してみるとこれまでそして jQueryプラグインそれが何かの役に立つなら。基本的に @media ルールを使用していますが、私が知る限りインラインではないため、ブラウザのサポートは異なる可能性がありますが、期待できる最高のものだと思います:(

これが機能するかどうかを確認してください...すべての型に対してこれを実行し、ステートメントが null または同等の値を返すかどうかを確認してから、ルールを適用できると思います。

このサイトから: http://www.webdeveloper.com/forum/showthread.php?t=82453

IE:

if (document.styleSheets[0].media == 'screen'){...}

FF/NS:

document.getElementsByTagName ('LINK')[0].getAttribute ('media')

または

document.styleSheets[0].media.mediaText

そしてすべてのブラウザでそれをチェックするスクリプト（一部の新しいブラウザを除くので注意してください:)）

http://student.agh.edu.pl/~marcinw/cssmedia/

このスクリプトは if ステートメントでブール値 true/false として機能します。うまくいくことを願っています!

document.getElementsByTagName('link').each(function( link )
{
  //do something with link.media
  //hide whatever you need to hide, etc
});

私は私のスクリプトは、上記のテストしてみた - それは今、すべての新しいブラウザ、税込で動作します。 IE8の最終ます。

スクリプトはここに移動： http://cssmedia.pemor.pl/するあなたがしたい場合にのみ、それを使用すること自由に感じています。

に関してはマルチンWiazowski

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

Javascript でメディア タイプをどのように判断しますか?

Javascript でメディアタイプをどのように判断しますか?