Wie beurteilen Sie den Medientyp in Javascript bestimmen?

StackOverflow https://stackoverflow.com/questions/494235

Frage

Ich sah mich um und diese Frage nicht noch gefragt sehen.

Was in Javascript ein zuverlässiger Weg, um den Medientyp (zB Bildschirm, Druck, Handheld) auf der Seite? Ich habe Referenzen zu bestimmen, zu sehen document.styleSheets[0].media, aber ich habe kein Glück gehabt mit diesem entweder weil der Browser Unterstützung Fragen oder weil ich nicht etwas zu verstehen.

Ich frage, weil ich etwas will von Javascript in Bildschirmansicht versteckt werden, aber nicht in der Druckansicht. Medienabhängige Stile können nicht geltend gemacht werden, dies zu tun, weil ich Prototype bin mit einem Kippschalter für das Element laufen, und Prototype wird kein Element erlauben, sichtbar zu schalten, wenn sie unsichtbar (display: none) erklärt wurden, mit nicht-Inline-CSS *. Ich habe versucht, nur setzen medienspezifische Inline-Styles für das Element (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), aber von dem, was ich sagen kann, das wird nicht unterstützt.

Ich weiß, dass ich kann zyklisch durch die Stylesheets und überprüfe, um zu sehen, ob ein druckspezifischen verknüpft Sheet aktiv ist oder nicht, aber ich bin derzeit in einer Situation, in verschiedenen medienspezifischen Stildeklarationen aller um in einem einzigen gemischt werden verknüpft Sheet, das ist so nicht gut. Und ja, kann ich nur die Stylesheets in verschiedene Medientypen aufgeteilt, aber ich würde zuerst, um herauszufinden, wie, ob oder nicht, kann ich nur zuverlässig die Art Medien zieht aus dem DOM mit Javascript, völlig unabhängig von CSS . Oh, und ich habe versucht, diesen Trick von „versteckt ein Element für die Druckansicht, dann überprüfen, um zu sehen, ob es mit Javascript sichtbar ist“, aber das ist immer Folge (wenn ich Druckvorschau laden) Javascript detemining, dass die vermeintlichen-to- seine verborgenen Elemente sichtbar sind und die Durchführung, was DOM-Manipulation ich es sagen zu, trotz der Tatsache, dass diese Elemente nicht sichtbar. Wenn jemand würde mehr Details über mögen, was ich rede hier, ich kann in einem Bearbeitungs auszuarbeiten.

* Dies ist etwas, das ich nicht verstanden und durch ständig gereizt bin. Jeder, der nicht nur die Einsicht in sie bekommt einen großen upvote von mir zur Verfügung stellen kann.

War es hilfreich?

Lösung

  

[..], Prototype wird ein Element nicht erlauben, sichtbar zu schalten, wenn sie unsichtbar (display: none) erklärt wurden, mit nicht-Inline-CSS. Das ist etwas, das ich nicht verstanden und bin ständig irritiert. Jeder, der nicht nur die Einsicht in sie bekommt einen großen upvote von mir zur Verfügung stellen kann.

Sie haben wahrscheinlich schon dies zum Beispiel, aber die Dokumentation gesehen show (es gibt auch andere verwandte Funktionen mit derselben Note) heißt es:

  

Element.show kann nicht Anzeigeelemente über CSS-Stylesheets versteckt. Beachten Sie, dass dies ist kein Prototyp Einschränkung, sondern eine Folge davon, wie die CSS display Eigenschaft funktioniert.

Also, es ist ein bekanntes Problem, und sie beschuldigen CSS. Allerdings betrachten Sie das folgende Dokument (ich habe nicht Prototype vor verwendet, also bin ich nicht sicher, ob dies die empfohlene Methode ist für die DOM warten, um zu laden, aber es scheint zu funktionieren): 

<!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!

Wie Sie bereits wissen, wird dies nicht funktionieren. Warum? Nun, wie wäre Prototype wissen, was zu „Reset“ die display Eigenschaft auf, wenn Sie sagen p#victim sich show? (Mit anderen Worten: Wie kann es herausfinden, was sollte der Wert von display gewesen, wenn die display: none im Regelsatz mit dem p#victim Wähler nicht vorhanden ist.) Die Antwort ist einfach: Es ist nicht können. (Denken Sie darüber für eine Sekunde. Was passiert, wenn ein anderer Regelsatz den Wert display ändern würde, wenn die display: none in unserem Regelsatz mit dem p#victim Wähler nicht vorhanden war? (Dh wir nicht, dass zB p annehmen kann immer eingestellt werden sollte, um block, andere rulesets haben diesen Wert geändert.) wir konnten die display Eigenschaft von einem Regelsatz in einem Stylesheet entfernen können, und wir können die gesamte Verbindung zwischen dem Element und der Regelsatz nicht entfernen, weil es andere Eigenschaften und so weiter enthalten können ( selbst wenn es möglich wäre, es wäre, imho, nicht nahe liegend zu finden die ruleset, dies zu tun mit). natürlich könnten wir weiter und weiter gehen mit diesem, aber afaik gibt es keine bekannte Lösung für dieses Problem.)

Warum funktioniert die Inline alternative Arbeit? Zuerst sehen wir uns an, wie show implementiert: 

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

AFAICT die einzige wichtige Sache, die diese Funktion tut, ist element.style.display auf einen leeren String gesetzt (''), die display von style „entfernt“. Toll! Aber was bedeutet das? Warum wollen wir es entfernen ?! Zuerst müssen wir herausfinden, was element.style tatsächlich darstellt und ändert, wenn wir ihre Werte ändern.

Die MDC-Dokumentation für element.style heißt es:

  

Gibt ein Objekt zurück, das das style Attribut des Elements darstellt.

Beachten Sie das letzte Wort: Attribut . element.style ≠ der aktuelle „berechnete“ Stil für das Element, es ist nur eine Liste der Objekte im style Attribute (siehe MDC für eine längere / bessere Erklärung).

Betrachten Sie das folgende Dokument: 

<!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;" versteckt p#victim aber wenn das DOM-Finish Laden Prototyp wird sich ändern, es zu style="", und der Browser den Wert für die display Eigenschaft (der Wert aus dem Standard-Stylesheet des Browsers in diesem Fall).

wird neu berechnet

Aber , betrachten Sie das folgende Dokument: 

<!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 behandelt die Stylesheets richtig stopfen, jedenfalls in diesem Fall! Das ist nicht so einfach wie die Prototyp-Lösung zu erklären, und es gibt zu viele Schichten von awesomeness für mich durch jetzt zu lesen, und es gibt viele Fälle, in denen jQuery fplagt den richtigen Wert für display zu berechnen. (Quick letzte Anmerkung:. Firebug ..., aber ich denke, es nutzt einige Firefox exklusive Sachen oder etwas)

Andere Tipps

EDIT: Leider (Note to self: RTFQ Rob, sheesh). Eine schnelle googeln engazonné diese bis und jQuery-Plugin wenn jede Erwähnung ist. Es ist im Grunde mit den @media Regeln, aber nicht so weit, wie ich Inline Ihr Browser Unterstützung variieren kann, so sagen kann, aber es ist das Beste kann man hoffen, denn ich denke: (

Sehen Sie, ob das funktioniert ... Ich glaube, Sie dies für jede Art tun können, und nur prüfen, ob die Anweisung null oder äquivalent zurückgibt, dann Regeln gelten.

Von dieser Seite: http: //www.webdeveloper. com / forum / showthread.php? t = 82453

  

IE:

     

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

     

FF / NS:

     

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

     

oder

     

document.styleSheets[0].media.mediaText

und ein Skript, um es in allen Browsern zu überprüfen (mit Ausnahme einiger neuen, so vorsichtig sein:))

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

Dieses Skript arbeitet in einer if-Anweisung als boolean wahr / falsch! Hoffen, dass Sie es an die Arbeit! 

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

Ich habe mein Skript oben erwähnt getestet - es jetzt mit allen neuen Browsern, inkl funktioniert. IE8 endgültig.

Das Skript bewegt sich hier: http://cssmedia.pemor.pl/ Fühlen Sie sich frei, es zu benutzen, wenn nur Sie wollen.

Im Hinblick Marcin Wiazowski

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top