Como você determina o tipo de mídia em JavaScript?

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

Pergunta

Eu olhei em volta e não viu esta pergunta ainda.

O que é uma maneira confiável em Javascript para determinar o tipo de mídia (por exemplo, tela, impressão, handheld) da página? Já vi referências a document.styleSheets[0].media, mas não tive sorte com este , ou por causa de problemas de suporte do navegador ou porque eu não estou entendendo alguma coisa.

Estou perguntando porque eu quero algo a ser escondido por Javascript em tela, mas não em vista de impressão. Dependentes de mídia estilos não pode ser invocado para fazer isso porque eu estou usando Prototype para executar um interruptor para o elemento, e Prototype não vai permitir que um elemento para ser transferido para visível se fosse declarado invisível (display: none) com CSS não-inline *. Tentei apenas definir estilos inline media-específicas para o elemento (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), mas pelo que eu posso dizer, que não é suportado.

Eu sei que eu posso percorrer as folhas de estilo e verificar para ver se uma folha de estilo específica de impressão ligado está ativo ou não, mas eu estou atualmente em uma situação onde declarações de estilo específicos de mídia-vária estão por toda misturada em uma única ligada estilo, de modo que não é bom. E sim, eu só posso dividir as folhas de estilo em diferentes tipos de mídia, mas eu gostaria primeiramente de descobrir se eu posso ou não basta puxar de forma confiável a mídia digitar fora do DOM com Javascript, completamente independente de CSS . Oh, e eu tentei esse truque de "esconder um elemento para a vista de impressão, em seguida, verificar para ver se é visível com Javascript", mas que sempre resultou em (quando eu carregar visualização de impressão) Javascript detemining que o suposto-to- elementos ser escondida são visíveis e realizando tudo o que a manipulação DOM eu diga a ele para, apesar o fato de que esses elementos não são visível. Se alguém quiser mais detalhes sobre o que eu estou falando aqui, posso elaborar, em uma edição.

* Isso é algo que eu não tenha entendido e estou constantemente irritado com. Qualquer um que pode fornecer qualquer visão sobre ele recebe um grande upvote de mim.

Foi útil?

Solução

[..], Prototype não vai permitir que um elemento a ser comutada para visível se fosse declarado invisível (display: none) com CSS não-inline. Isso é algo que eu não tenha entendido e estou constantemente irritado com. Qualquer um que pode fornecer qualquer visão sobre ele recebe um grande upvote de mim.

Você provavelmente já viu isso, mas a documentação para por exemplo show (existem outras funções relacionadas com a mesma nota) afirma que:

Element.show não pode Elementos de apresentação escondidos via folhas de estilo CSS. Note-se que esta não é uma limitação Prototype mas uma consequência de como funciona a propriedade CSS display.

Então, é um problema conhecido e eles culpam CSS. No entanto, considere o seguinte documento (eu não usei Prototype antes, então eu não tenho certeza se esta é a maneira recomendada para aguardar o DOM para carga, mas parece trabalho): 

<!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 você já sabe, isso não vai funcionar. Por quê? Bem, como é que Protótipo sabe o que "reset" a propriedade display para quando você diz p#victim para show si? (Em outras palavras: como ela pode descobrir o que deveria ter sido o valor de display se o display: none não estava presente no conjunto de regras com o selector p#victim.) A resposta é simples: não pode. (Pense nisso por um segundo. E se um outro conjunto de regras poderia modificar o valor de display se o display: none não estava presente no nosso conjunto de regras com o selector p#victim? (Ie não podemos assumir que, por exemplo p sempre deve ser definido como block, outros conjuntos de regras podem ter mudado esse valor.) não podemos remover a propriedade display a partir de um conjunto de regras em uma folha de estilo, e não podemos remover toda a conexão entre o elemento e o conjunto de regras, pois pode conter outras propriedades e assim por diante ( mesmo se fosse possível, seria, IMHO, não óbvio para encontrar que conjunto de regras para fazer isso com). é claro que poderia continuar e continuar com isso, mas afaik não há é conhecido solução para este problema.)

Então, por que faz o trabalho em linha alternativa? Primeiro, vamos olhar como show é implementado: 

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

AFAICT a única coisa importante esta função faz é definir element.style.display para uma cadeia vazia (''), que "remove" display de style. Ótimo! Mas o que isso significa? Por que iríamos querer removê-lo ?! Primeiro temos que descobrir o que element.style realmente representa e modifica quando modifica seus valores.

A documentação MDC para element.style estados que:

Retorna um objeto que representa atributo style do elemento.

Observe a última palavra: atributo . element.style ? o atual "calculado" estilo para o elemento, é apenas uma lista das propriedades no atributo style (veja MDC para uma melhor explicação mais /).

Considere o seguinte 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;" peles p#victim mas quando o carregamento terminar DOM Prototype vai alterá-lo para style="", eo navegador irá recalcular o valor para a propriedade display (o valor da folha de estilo padrão do navegador, neste caso).

e , considere o seguinte 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 lida com as folhas de estilo encher corretamente, neste caso, de qualquer maneira! Isto não é tão simples de explicar como a solução Prototype e há a muitas camadas de grandiosidade para eu ler agora, e há muitos casos em que jQuery faflige para calcular o valor correto para display. (Quick última nota:. Firebug ..., mas eu acho que ele usa algum material exclusivo Firefox ou algo assim)

Outras dicas

EDIT: Sorry (Nota to self: RTFQ Rob, sheesh!). A googling rápida turfed isso e uma plugin jQuery se isso é qualquer uso. É basicamente usando as regras @media, mas não em linha, tanto quanto eu posso dizer assim, apoiar o seu navegador pode variar, mas é o melhor que você pode esperar eu penso: (

Veja se isso funciona ... Eu acho que você pode fazer isso para cada tipo e apenas verificar se a instrução retornar nulo ou equivalente, em seguida, aplicar as suas regras.

A partir deste site: http: //www.webdeveloper. com / forum / showthread.php? t = 82453

IE:

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

FF / NS:

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

ou

document.styleSheets[0].media.mediaText

e um script para verificar que em todos os navegadores (exceto para alguns novos, por isso tome cuidado:))

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

este script trabalha em uma instrução if como um verdadeiro / falso booleano! Espero que você vai fazê-lo funcionar! 

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

Eu testei o meu script mencionado acima - que agora trabalha com todos os novos navegadores, incl. IE8 final.

O script mudou aqui: http://cssmedia.pemor.pl/ Sinta-se livre para usá-lo só se você quiser.

Com relação Marcin Wiazowski

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top