JavaScript를 통해 CSS 규칙을 정의하는 모범 사례

자바 스크립트가 활성화되었을 때만 필요한 스타일 시트를로드하고 있습니다. 더 중요한 것은 JavaScript가 비활성화되어 있으면 없어야합니다. 자바 스크립트 라이브러리가로드되기 전에 가능한 빨리 (머리 부분에서)이 작업을 수행하고 있습니다. (모든 스크립트를 가능한 한 늦게로드하고 있습니다.) 외부에서이 스타일 시트를로드하는 코드는 간단하고, 다음과 같습니다JavaScript를 통해 CSS 규칙을 정의하는 모범 사례

.noscript { 
    display: none; 
}

이 정말하지 않습니다 순간에 그것은 잘 작동,하지만 내 모든 CSS 파일이 포함

var el = document.createElement('link'); 
el.setAttribute('href','/css/noscript.css'); 
el.setAttribute('rel','stylesheet'); 
el.setAttribute('type','text/css'); 
document.documentElement.firstChild.appendChild(el);

것은 이것이다 파일 로딩을 보증하므로 자바 스크립트에서 규칙을 동적으로 정의하는 것을 고려하고 있습니다. 가장 좋은 방법은 무엇입니까?. 다양한 기술을 빠르게 검사하면 브라우저 간 해킹이 상당히 필요하다는 것을 알 수 있습니다.

P. please는 jQuery 예제를 게시하지 않는다. 라이브러리가 없으면이 작업을 수행해야합니다.

출처

2010-04-03 Tim Whitlock

spot 고의적 인 실수가 있습니까? * 기침 * 나는 "noscript.css"가 아닌 "script.css"를로드한다고 씁니다. –

흠. 문제를 대역폭의 몇 바이트되지 절약, 왜 모든 스타일 시트를로드하지만, 특정 클래스와 자바 스크립트 하나에서 모든 클래스 접두사하지 :

body.hasjs a { color: blue } 
body.hasjs div.contactform { width: xyz; }

해당 클래스없이 몸을 제공

<body>

같은

및 클래스 이름을 추가하는 작은 자바 스크립트를 추가, 뭔가 :

body.onload = function() { 
document.body.className = "hasjs"; 
}

더욱 빠른 스위칭 프로세스를 얻을, 당신은 기본 자바 스크립트 onDOML 중 하나에 볼 수 있었다 oad 솔루션.

출처

2010-04-03 08:42:43

setAttribute가 Internet Explorer에서 손상되었습니다. 설정되는 속성의 속성이 해당 속성과 동일하지 않을 때마다 실패합니다. 같은 가치에지도. class는 예약 된 키워드이기 때문에 className이라는 속성을 사용하므로이 속성은 중단됩니다. foo.className = 'value'를 사용하십시오. – Quentin

본문에 ID를 설정할 필요가 없습니다. 대신'document.body'를 사용하여 액세스하십시오. – Quentin

그건 깔끔한데, 난 그런 높은 수준의 선택기를 사용하는 생각하지 않았다. 클래스 "nojs"로 서브 한 다음 가능한 한 일찍 클래스를 제거하는 것이 더 좋을 것입니다. –

JavaScript를 통해 CSS 규칙을 정의하는 모범 사례

답변

관련 문제