переключение css для Javascript отключено - PullRequest
Новая
       1

переключение css для Javascript отключено

4 голосов
/ 21 ноября 2011

У меня проблема с переключением css, когда Javascript отключен.

У меня есть этот код: 

<style type="text/css">.nonjsonly{display:none;}.jsonly{display:inline;}</style>
<noscript><style type="text/css">.nonjsonly{display:inline}.jsonly{display:none}</style></noscript>

Ведьма работает прямо сейчас, но W3C не одобряет это, так как noscript недопустим в заголовке HTML (и код в голове)

Есть идеи, как это можно сделать?

Заранее спасибо

Ответы [ 4 ]

7 голосов
/ 21 ноября 2011

Более подходящий способ справиться с этим - сначала разместить CSS не-js без тега <noscript>, а затем скрипт, который загружает таблицу стилей для клиентов с JavaScript. Css-совместимый JS должен затем каскадно переопределить базовый лист. 

<style type='text/css'>
  /* baseline CSS for all clients */
</style>

<!-- Then a script loads an additional stylesheet which cascades to override the baseline -->
<!-- Obviously, won't get loaded by noscript clients -->
<script type='text/javascript'>
  document.write("<link type='text/css' rel='stylesheet' href='/path/to/js-friendly.css' />");
</script>
3 голосов
/ 21 ноября 2011

Сначала установите css по умолчанию: 

<style type="text/css" src="default.css" />

, поэтому стили не-JS применимы ко всем. Затем используйте JS для динамической загрузки стилей "js-enabled": 

<script type="text/javascript">
    css = document.createElement('link');
    css.setAttribute('rel', 'stylsheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', 'js-styles.css'); // change as needed
    document.getElementsByTagName('head')[0].appendChild(css);
</script>

, который переопределит стили не-js.

1 голос
/ 21 ноября 2011
  1. Использовать 1 таблицу стилей
  2. Добавить .js к элементу html через JavaScript
  3. Для стилей, требующих JavaScript, перед вашим селектором добавьте .js

Ex: 

#foo

становится 

.js #foo

Еще лучше, используйте Modernizr , чтобы обнаружить более продвинутые функции (он также автоматически добавит .js).

1 голос
/ 21 ноября 2011

вы можете сделать что-то вроде этого 

<script>
    document.getElementsByTagName('body')[0].className += ' jsActive';
</script>

, чтобы этот сценарий записал класс jsActive в элемент Body, если Javascript доступенУ вас нет класса noJavascipt, но вы можете выбрать его с помощью CSS и создать свои функции

...