2011-04-22 3 views
8

<style> 블록을 사용하지 않으려면 모든 브라우저에서 document.styleSheets[x].disabled = true을 사용할 수 있습니다. 그러나 IE 만이 속성을 태그 자체에 설정할 수 있습니다 (<style disabled="true">). 이 문제를 다른 브라우저에서 해결할 수 있습니까? 동적으로 수행 된 작업이 정적으로 수행 될 수 없다는 것이 이상하게 보입니다.disabled = true는 <style>에 동적으로 설정할 수 있습니다. 정적이 아닌 이유는 무엇입니까?

+5

var style = document.querySelector("#my-style"); document.querySelector("#btn-style").addEventListener("click",function() { style.removeAttribute("media"); }); document.querySelector("#btn-unstyle").addEventListener("click",function() { style.setAttribute("media", "max-width: 1px"); });
<style id="my-style" media="max-width: 1px"> p { color: red } </style> <p>Styled if you click below.</p> <button id="btn-style">Style that p</button> <button id="btn-unstyle">Unstyle that p</button>

는'TRUE '는'disabled' 속성의 잘못된 값이 될 수 있습니다. –

+0

스타일 태그에 onload 이벤트를 추가하십시오 :''onload = "this ="true "'' –

답변

2

정적으로하려면 스타일 태그를 제거하십시오.

대신 DOM에서 스타일 노드를 제거하고 다시 삽입하여 다시 사용할 수 있습니다.

+2

그리고 나중에 동적으로 추가하기를 원합니까? –

+0

@ 옥수수의 피터,하지만 더 이상 정적이 아닙니다. – cdeszaq

+2

여기의 유스 케이스는 정적으로 비활성화 된 스타일로 시작하는 것이지만 나중에 동적으로 활성화 할 수 있도록하는 것이 좋습니다. –

6

style 요소에는 disabled이라는 유효한 속성이 없습니다. the HTML spec에서 :

<!ELEMENT STYLE - - %StyleSheet  -- style info --> 
<!ATTLIST STYLE 
    %i18n;        -- lang, dir, for use with title -- 
    type  %ContentType; #REQUIRED -- content type of style language -- 
    media  %MediaDesc; #IMPLIED -- designed for use with these media -- 
    title  %Text;   #IMPLIED -- advisory title -- 
    > 

그러나, HTMLStyleElement DOM 인터페이스는 속성을 가지고있다. the DOM spec에서 :
interface HTMLStyleElement : HTMLElement { 
      attribute boolean   disabled; 
      attribute DOMString  media; 
      attribute DOMString  type; 
}; 

는 DOM에서의 대응과 HTML 요소를 혼동하지 마십시오. 은 "동적으로 수행 된 작업이 정적으로 수행 될 수 없다는 것이 이상합니다." HTML 및 DOM 사양은 여러 가지 문제를 해결하기 위해 작성되었습니다. HTML은 마크 업 언어입니다. DOM은 문서의 객체를 표현하고 상호 작용하기위한 규칙입니다.

+0

해결 방법은 없습니까? IE는 맹목적으로 표준을 따르는 반면 합리적인 것은합니다. – Lucent

+0

@Lucent - 귀하의 성격에 동의하지 않습니다. IE는 불필요하게 표준에서 벗어나지 만 다른 모든 사람들은 합리적인 것을 수행합니다 (즉, 명백하고 설득력없는 이유가없는 표준을 따릅니다). DOM과 HTML은 별개의 것입니다. 당신은 그들의 각각의 표준을 모아서는 안됩니다. 이것들은 다른 목적을 가진 다른 표준이기 때문에 동적으로 행해진 것을 정적으로 행할 수 없다는 것이 이상하지 않습니다. –

+0

@Lucent - 정말 아닙니다. 표준 브라우저는 이미 브라우저에서 수행 한 작업 또는 수행 할 의사가있는 작업을 기록합니다.그들이 원하는 것은 사용자로부터의 수요가 있다고 생각하는 것입니다. 즉, 수익을 제공하는 사용자입니다. 즉, 사용자가 웹 작성자가 만든 웹 페이지를 사용할 수 있는지 여부에 달려 있으며,이 경우 사용자 나 작성자가 구현할 수있는 다른 기능보다 앞서이 기능을 사용하기위한 요구가 충분하지 않습니다. – Alohci

2

하나의 간단한 옵션은 기본 스타일 시트 세트와 다른 제목을 가진 대체 스타일 시트로 만드는 것입니다. 이렇게하면 브라우저가 기본값으로 비활성화됩니다.

+1

[CSSOM 5.2.5 절] (http://dev.w3.org/csswg/cssom/#examples)의 예제가 style 요소의 사용을 포함한다면 좋을 것입니다 – Alohci

0

media 속성은 HTML과 자바 스크립트에서 모두 설정할 수 있습니다. 아이디어는 media 속성을 설정하여 스타일 태그가 모든 장치에 적용되지 않도록 비활성화하는 것입니다.

media="bogus" 또는 media="none"과 같이 무효로 설정하는 것은 브라우저가 단순히 조건을 무시하고 모든 미디어 유형에 스타일을 적용하기로 결정할 수 있으므로 위험합니다. 다행스럽게도 최대 화면 너비를 1 픽셀로 설정하는 것은 꽤 유효하며 제 책에서는 스타일 태그를 사용하지 않는 것과 거의 같습니다. 그것은 생각

관련 문제