JavaScript의 미디어 유형을 어떻게 결정합니까?

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

문제

나는 주위를 둘러 보았고 아직이 질문을 보지 못했습니다.

JavaScript에서 페이지의 미디어 유형 (예 : 화면, 인쇄, 핸드 헬드)을 결정하는 신뢰할 수있는 방법은 무엇입니까? 나는 언급을 보았다 document.styleSheets[0].media, 그러나 브라우저 지원 문제 또는 무언가를 이해하지 못하기 때문에 이것을 사용하는 운이 없었습니다.

화면보기에서 JavaScript에 숨겨져있는 무언가를 원하지만 인쇄보기에는 숨겨지기를 원하기 때문에 묻습니다. 요소의 토글 스위치를 실행하기 위해 프로토 타입을 사용하고 있기 때문에 미디어 의존 스타일은이 작업을 수행 할 수 없으며 프로토 타입이 보이지 않는 경우 요소가 표시 될 수 있도록 허용하지 않습니다 (display: none) 비 인화 CSS*. 요소에 대한 미디어 별 인라인 스타일을 설정하려고했습니다.<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), 그러나 내가 말할 수있는 바에 따르면, 그것은 지원되지 않습니다.

스타일 시트를 순환하고 인쇄 별 링크 된 스타일 시트가 활성인지 아닌지 확인할 수 있지만 현재 다양한 미디어 별 스타일 선언이 단일 링크 된 스타일 시트에서 혼합되는 상황에 처해 있습니다. 그래서 그것은 좋지 않습니다. 예, 스타일 시트를 다른 미디어 유형으로 나눌 수 있지만 먼저 JavaScript를 사용하여 DOM에서 미디어 유형을 안정적으로 끌어 당길 수 있는지 여부를 먼저 알아 내고 싶습니다. CSS와 완전히 독립적으로. 아, 그리고 나는 "인쇄보기 요소를 숨기고 JavaScript로 보이는지 확인하십시오"라는 트릭을 시도했지만 항상 (인쇄 미리보기를로드 할 때) JavaScript가 항상 숨겨진 요소가 보이고 내가 말한 DOM 조작을 수행하고 있습니다. ~에도 불구하고 그 요소가 있다는 사실 그렇지 않습니다 보이는. 내가 여기서 말하는 내용에 대한 자세한 내용을 원한다면 편집에서 자세히 설명 할 수 있습니다.

*이것은 내가 이해하지 못하고 끊임없이 짜증을내는 것입니다. 그것에 대한 통찰력을 제공 할 수있는 사람은 나에게 큰 투표를 얻습니다.

도움이 되었습니까?

해결책

..], 프로토 타입은 보이지 않는 선언 된 경우 요소를 가시로 전환 할 수 없습니다 (display: none) 비 인화 CSS. 이것은 내가 이해하지 못하고 끊임없이 짜증을내는 것입니다. 그것에 대한 통찰력을 제공 할 수있는 사람은 나에게 큰 투표를 얻습니다.

당신은 아마 이미 이것을 보았지만 예를 들어 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 선택기.) 대답은 간단합니다. (잠깐 생각해보십시오. 다른 규칙 세트가 값을 수정한다면 어떨까요? display 만약 display: none 우리의 규칙 세트에는 없었습니다 p#victim 선택자? (즉, 우리는 예를 들어 생각할 수 없습니다 p 항상 설정해야합니다 block, 다른 규칙 세트는 그 값을 변경했을 수 있습니다.) 우리는 display 스타일 시트의 규칙 세트의 속성은 다른 속성을 포함 할 수 있기 때문에 요소와 규칙 세트 사이의 전체 연결을 제거 할 수 없습니다 (IMHO, 불가능한 경우에도 불구하고 찾기 어느 이 작업을 수행하는 규칙 세트). 물론, 우리는 이것으로 계속 진행할 수 있지만, Afaik이 문제에 대한 알려진 해결책은 없습니다.)

그렇다면 인라인 대안이 왜 작동합니까? 먼저 방법을 살펴 보겠습니다 show 구현됩니다 :

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

이 기능이하는 유일한 중요한 일은 element.style.display 빈 줄에 (''), "제거" display ~에서 style. 엄청난! 그러나 그게 무슨 뜻입니까? 왜 우리는 그것을 제거하고 싶습니까?! 먼저 우리는 무엇을 찾아야합니다 element.style 실제로 값을 수정하면 실제로 수정하고 수정합니다.

MDC 문서 element.style 다음을 설명합니다.

요소를 나타내는 객체를 반환합니다 style 기인하다.

마지막 단어를 참고하십시오. 기인하다. element.style ≠ 요소의 현재 "계산 된"스타일, 그것은 단지 속성의 목록 일뿐입니다. style 속성 (더 긴/더 나은 설명은 MDC 참조).

다음 문서를 고려하십시오.

<!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가 올바른 값을 계산하지 못하는 경우가 많이 있습니다. display . (빠른 마지막 메모 : Firebug ...하지만 Firefox 독점 물건이나 무언가를 사용하는 것 같습니다.)

다른 팁

편집 : 죄송합니다 (자체 참고 : RTFQ Rob, Sheesh!). 빠른 검색 잔디 이거 그리고 a jQuery 플러그인 그것이 어떤 사용이라면. 기본적으로 @Media 규칙을 사용하고 있지만 브라우저 지원이 다를 수 있도록 말할 수있는 한 인라인은 아니지만 다음과 같이 기대할 수있는 최선입니다.

이것이 작동하는지 확인하십시오 ... 모든 유형에 대해이 작업을 수행 할 수 있다고 생각하고 명세서가 NULL 또는 동등한 것을 반환하는지 확인한 다음 규칙을 적용하십시오.

이 사이트에서 : http://www.webdeveloper.com/forum/showthread.php?t=82453

즉:

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 진술에서 부울 참/거짓으로 작동합니다! 당신이 그것을 일할 수 있기를 바랍니다!

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

위에서 언급 한 스크립트를 테스트했습니다. 이제 모든 새로운 브라우저에서 작동합니다. IE8 최종.

스크립트가 여기에서 이동했습니다. http://cssmedia.pemor.pl/원한다면 자유롭게 사용하십시오.

Marcin Wiazowski와 관련하여

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top