JavaScript가 활성화 된 경우에만 특정 CSS 스타일 정의

내 웹 페이지에 DIV가 포함되어 있습니다. Javascript가 활성화 된 경우 페이지가로드 될 때 DIV를 보이지 않게 (display: none;) 표시합니다. JS가 비활성화 된 경우 표시되도록 (display: block;) 표시합니다.JavaScript가 활성화 된 경우에만 특정 CSS 스타일 정의

내가 할 수있는 : JS가 무효 인 경우

document.write('<div style="display:none;">...</div>');

또는 첫 번째 코드로

document.getElementById('foo').style.display = 'none';

는 DIV가되지 않습니다. 두 번째로 JS가 실행될 때 페이지가로드되고 사라질 때 DIV가 표시됩니다.

나는 이것을 해결하기에는 너무 어리 석다.

스타일을 쓰려면 <div> 태그 안에 JavaScript를 넣을 수 있습니까?

<div <script>document.write('style="display:none;"');</script>>

어쩌면 같은 것을 :

<div onLoad="document.write('<div style="display:none;">...</div>');">

누군가가 아이디어가 있습니까 물론이 좋아하지?

출처

2014-01-25 Anonymous

JS가 숨기지 않는 한 요소를 표시 할 때의 한 가지 문제점은 JS on을 사용하더라도 JS가 시작될 때까지 요소가 표시 될 가능성이 높습니다. 따라서 파일의 맨 위에 일부 JS를 추가하는 것이 좋습니다 CSS로드 전에 들어가기 위해 바로 루트 요소에 대한 클래스. 다음은 간단한 예제 (내 멍청한 놈 JS에서)입니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script> 
(function() { 
    var root = document.querySelector('html'); 
    root.className = "js"; 
}()); 
</script> 
<style media="all"> 

div {width: 500px; height: 200px; background: blue;} 
.js div {display: none;} 

</style> 
</head> 
<body> 

<div></div> 

</body> 
</html>

이 oldfashioned 사용하는 것보다 훨씬 더 <noscript> 및 document.write() 등

편집 : 나는 html 요소를 대상으로하는 쉬운 방법이 있습니다 만한다 document.documentElement. 따라서 위의 코드는 다음과 같이 쓸 수 있습니다.

<script> 
(function() { 
    document.documentElement.className = "js"; 
}()); 
</script>

출처

2014-01-25 13:26:10

이것은 내가 원하는 것처럼 보입니다. 스타일 태그 안에 JS 스크립트를 넣으려고했는데 작동하지 않습니다. 코드를 한 문장 또는 두 문장으로 설명 할 수 있습니까? 언제, 어떻게 함수가 호출되며, 그것은 무엇을 하는가? –

JS를 사용할 수있는 경우 페이지 상단의 '

<noscript>에 <div>을 넣는 것이 어떨까요?

<noscript><div style="display:none;">...</div></noscript>

이제 당신도 그것을 처리하는 자바 스크립트를 사용할 필요가 없습니다.

출처

2014-01-25 13:11:10 Deryck

JS가 활성화되어 있으면 보이지 않는 DIV가 없기 때문에 JS를 통해 표시 할 수 있습니다! –

JavaScript가 활성화 된 경우에만 특정 CSS 스타일 정의

답변

관련 문제