外部cssファイルからやりたい。メイン css に div#abc がありますが、javascript が無効になっている場合にのみ、この div に display none を設定したいです。
4 に答える
どうですか
<noscript>
<style type="text/css">
div#abc { display: none; }
</style>
</noscript>
? どうしても外部の CSS ファイルで実行したい場合は、このファイルをstyle 属性の代わりに要素内に移動しno_js.css
て参照してください。link
ただし、ほとんどの場合、別の方法を使用する方が便利です。無効になっている JS のデフォルトを設定し、JS にクラス名を変更させて (たとえば)、スタイルを更新させます。jQuery の例:
$(document).ready(function () {
$('.fancy_user_interface_element').addClass('additional_js_style_class');
});
div style="display: none;" を作成します デフォルトでは、javascript で表示します。
<div id="abc" style="display: none;">
...
</div>
<script type="text/javascript">
$(function() {
$('#abc').show(); //using jQuery
});
</script>
このように、JavaScript が有効になっていない場合、div は表示されません。インライン CSS を使用して示しましたが、CSS クラスを使用して要素からクラスを削除することもできます。
<style>
.requires-javascript { display: none; }
</style>
<div id="abc" class="requires-javascript">
...
</div>
<script type="text/javascript">
$(function(){
$('.requires-javascript').removeClass('requires-javascript');
});
</script>
この方法では、javascript を必要とするページ上のすべての要素に対して単一の jQuery ステートメントで機能します。
表示したい要素をnoscriptタグ内に入れると、javascriptが無効になっている場合にのみ表示されます。
あなたがすることは、ルールのスタイルを非表示から非表示に設定するイベントを JavaScript に含めることです。CSS でその要素を常に非表示に設定します。JavaScript がオフになっている場合、非表示にされないため、CSS によって非表示のままになります。