tag - ¿Cómo se determina el tipo de medio en Javascript?

getelementsbytagname jquery

Question

Miré a mi alrededor y aún no había visto esta pregunta.

¿Cuál es una forma confiable en Javascript para determinar el tipo de medio (por ejemplo, pantalla, impresión, computadora de mano) de la página? He visto referencias a document.styleSheets[0].media , pero no he tenido suerte al usar esto, ya sea por problemas de soporte del navegador o porque no estoy entendiendo algo.

Pregunto porque quiero que JavaScript oculte algo en la vista de pantalla, pero no en la vista de impresión. No se puede confiar en los estilos dependientes de los medios para hacer esto porque estoy usando Prototype para ejecutar un interruptor de alternancia para el elemento, y Prototype no permitirá que un elemento se cambie a visible si se declaró invisible ( display: none ) con CSS * no en línea. Intenté simplemente establecer estilos en línea específicos para el elemento ( <div style="@media print { foo: bar; } @media screen { blargh: bfargle; }"> ), pero por lo que puedo decir, eso no es así soportado.

Sé que puedo desplazarme por las hojas de estilo y comprobar si hay activa o no una hoja de estilo vinculada a la impresión, pero actualmente me encuentro en una situación en la que varias declaraciones de estilo específicas de cada medio están mezcladas en una única hoja de estilo vinculada. así que eso no está bien. Y sí, puedo dividir las hojas de estilo en diferentes tipos de medios, pero primero me gustaría saber si puedo o no extraer el tipo de medios del DOM con Javascript, independientemente de CSS . Oh, y he intentado ese truco de "ocultar un elemento para la vista de impresión, luego verifico si es visible con Javascript", pero eso siempre da como resultado (cuando cargo la vista previa de impresión) que el Javascript detemine que el supuesto los elementos be-hidden son visibles y realizan cualquier manipulación de DOM que le diga, a pesar del hecho de que esos elementos no son visibles. Si alguien quisiera más detalles acerca de lo que estoy hablando aquí, puedo elaborar en una edición.

* Esto es algo que no he entendido y constantemente me irrita. Cualquiera que pueda darnos una idea de ello obtiene un gran voto positivo de mi parte.

Answer 1

EDITAR: Lo siento (Nota para mí: RTFQ Rob, sheesh!). Una rápida búsqueda en Google creó esto y un plugin jquery, si sirve de algo. Básicamente, estoy usando las reglas de @media pero no en línea, por lo que puedo decir, así que el soporte de tu navegador puede variar, pero es lo mejor que puedes esperar, creo :(

Answer 2

Vea si esto funciona ... Creo que puede hacer esto para cada tipo y simplemente verifique si la declaración arroja un valor nulo o equivalente, luego aplique sus reglas.

Desde este sitio: http://www.webdeveloper.com/forum/showthread.php?t=82453

ES DECIR:

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

FF / NS:

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

o

document.styleSheets[0].media.mediaText

y un script para verificarlo en todos los navegadores (excepto en algunos nuevos, así que ten cuidado :))

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

este script funciona en un enunciado if como un booleano verdadero / falso. Espero que lo hagas funcionar!

Answer 3

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

Answer 4

[..], Prototype no permitirá que un elemento se cambie a visible si se declaró invisible ( display: none ) con CSS no en línea. Esto es algo que no he entendido y constantemente me irrita. Cualquiera que pueda darnos una idea de ello obtiene un gran voto positivo de mi parte.

Probablemente ya hayas visto esto, pero la documentación para, por ejemplo, show (hay otras funciones relacionadas con la misma nota) establece que:

Element.show no puede mostrar elementos ocultos a través de hojas de estilo CSS. Tenga en cuenta que esto no es una limitación de prototipo, sino una consecuencia de cómo funciona la propiedad de display CSS.

Entonces, es un problema conocido y culpan a CSS. Sin embargo, considere el siguiente documento (no he usado Prototype antes, así que no estoy seguro de si esta es la forma recomendada de esperar a que se cargue DOM, pero parece que funciona):

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

Como ya sabes, esto no funcionará. ¿Por qué? Bueno, ¿cómo sabe Prototype a qué "restablecer" la propiedad de display cuando le dices a p#victim que se show ? (En otras palabras: cómo puede saber cuál debería haber sido el valor de display si la display: none no estaba presente en el conjunto de reglas con el selector de p#victim ). La respuesta es simple: no puede. (Piénselo un segundo.) ¿Qué pasaría si otro conjunto de reglas modificase el valor de display si la display: none no estuviera presente en nuestro conjunto de reglas con el selector de p#victim ? (Es decir, no podemos suponer que p siempre debería ser configurado para block , otros conjuntos de reglas pueden haber cambiado ese valor.) No podemos eliminar la propiedad de display de un conjunto de reglas en una hoja de estilos, y no podemos eliminar toda la conexión entre el elemento y el conjunto de reglas porque puede contener otras propiedades y así sucesivamente (incluso si fuera posible sería, en mi humilde opinión, no obvio para encontrar qué conjunto de reglas para hacer esto). Por supuesto, podríamos seguir y seguir con esto, pero afaik no hay una solución conocida para esto problema.)

Entonces, ¿por qué funciona la alternativa en línea? Primero, veamos cómo se implementa show :

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

Afaict lo único importante que hace esta función es establecer element.style.display en una cadena vacía ( '''' ), que "quita" la display del style . ¡Estupendo! Pero ¿qué significa eso? ¿Por qué querríamos eliminarlo? Primero, tenemos que descubrir qué element.style realmente representa y modifica cuando modificamos sus valores.

La documentación de MDC para element.style establece que:

Devuelve un objeto que representa el atributo de style del elemento.

Tenga en cuenta la última palabra: atributo . element.style ≠ el estilo actual "calculado" para el elemento, es solo una lista de las propiedades en el atributo de style (ver MDC para una explicación más larga / mejor).

Considera el siguiente documento:

<!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;" oculta a la p#victim pero cuando el DOM termine de cargar Prototype lo cambiará a style="" , y el navegador volverá a calcular el valor de la propiedad de display (el valor de la hoja de estilo predeterminada del navegador en este caso).

Pero , considere el siguiente documento:

<!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 maneja las hojas de estilo correctamente, ¡en este caso de todos modos! Esto no es tan simple de explicar como la solución Prototype y hay muchos niveles de genialidad que debo leer en este momento, y hay muchos casos en los que jQuery no puede calcular el valor correcto para la display . (Nota final rápida: Firebug ..., pero supongo que usa algunas cosas exclusivas de Firefox o algo).

Answer 5

He probado mi script mencionado anteriormente, ahora funciona con todos los navegadores nuevos, incl. IE8 final.

El script se movió aquí: http://cssmedia.pemor.pl/ Siéntete libre de usarlo si solo quieres.

Con respecto a Marcin Wiazowski