Как придать стиль CSS для любого элемента X / HTML, если JavaScript отключен?

Question

Я хочу сделать это из внешнего файла CSS. У меня есть div # abc в основном CSS, но я хочу установить отображение нет для этого div, только если JavaScript отключен

Answer 1

Как насчет

<noscript>
  <style type="text/css">
  div#abc { display: none; }
  </style>
</noscript>

? Если вы действительно хотите сделать это во внешнем файле CSS, переместите его в no_js.css и назовите этот файл элементом link вместо атрибута style.

В основном, однако, удобнее пойти по другому пути: установить значения по умолчанию для отключенного JS, а затем позволить JS изменить имена классов (например), чтобы обновить стиль. Пример jQuery:

$(document).ready(function () {
  $('.fancy_user_interface_element').addClass('additional_js_style_class');
});

Answer 2

Я бы сделал 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>

Этот способ заставит его работать с одним оператором jQuery для всех элементов на странице, для которых требуется JavaScript.

Answer 3

В вашем javascript есть событие, которое установит стиль правила от скрытого к скрытому. Пусть CSS всегда устанавливает этот элемент как скрытый. Если у них отключен javascript, он никогда не скрывает его, и поэтому он остается скрытым CSS.

Answer 4

Поместите элемент, который вы хотите отобразить, внутри тега noscript, и он будет отображаться, только если javascript отключен.