css style switcher для bootstrap

Я пытаюсь реализовать переключатель стиля в соответствии с https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to. , но как только я добавлю ссылку title = "" в ссылку css, файл css не будет загружен на страницу, а стили возвратятся к загрузке по умолчанию. мои внешние файлы css добавлены в нижней части тела. заказываются:css style switcher для bootstrap

<link rel="stylesheet" href="css/bootstrap.min.css"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 0px; 
     } 
    </style> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="css/my-styles.css"> 
<link rel="stylesheet" href="css/my-alternate-styles.css"> 
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">

есть ли что-то, что я пропустил?

источник

2016-12-18 pigsound

какие ошибки вы получаете? можете ли вы предоставить jsfiddle? – lomboboo

не уверен, правильно ли я сделал свою первую скрипку, чтобы вы могли получить от нее соответствующую информацию ... см. Здесь: https://jsfiddle.net/pigsound/em37bdjj/11/ – pigsound

@pigsound см. Мой ответ, я очень хорошо знакомы с этим конкретным кодом. – zer00ne

Вы, вероятно, сделали все правильно (кроме одного, см. Ниже *), код, который находится в статье, использует фигурные кавычки '' "", когда он должен использовать прямые кавычки '' "".

<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a> 
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>

Так что, если вы скопировать и вставить эту часть, он не будет разбирать правильно. Это правильный путь с прямыми цитатами:

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a> 
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>

Обзор этого PLUNKER вместо сниппета. Фрагмент не будет работать из-за использования нескольких таблиц стилей.

SNIPPET (. Не функционирует, обзор PLUNKER вместо)

<!doctype html> 
 
<html> 
 
    <head> 
 
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'> 
 
<link href='default.css' title='default' rel='stylesheet'> 
 
<link href='alt.css' title='alt' rel='alternate stylesheet'> 
 
     <style> 
 
     body { 
 
      padding-top: 50px; 
 
      padding-bottom: 0px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <section> 
 
     <p>TEST</p> 
 
     </section> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
    <script src='styleSwitcher.js'></script> 
 
    </body> 
 
    </html>

* Я заметила, что ты сказал:

... мои внешние файлы CSS добавляются в нижней части тела ...

Вы всегда должны размещать <link> с внутри <head>. Чаще всего JavaScript/jQuery нуждается в фактическом DOM для загрузки, прежде чем он сможет что-либо сделать. Поэтому в большинстве ситуаций важно убедиться, что ваш стиль (<link> и <style>) идет первым и внутри <head>.

Для <script>, лучше всего разместить их в нижней части <body> перед закрывающим тегом </body>. См. Фрагмент и PLUNKER, например, <link>, <style> и <script> макет.

источник

2016-12-18 18:26:52 zer00ne

, так что вы имеете в виду, что слишком много таблиц стилей, связанных с моим html-кодом? , когда я перезагружаю страницу, в течение 1 секунды отображается правильный css, но тогда он, кажется, выключается, и по умолчанию отображается css. Я попытался поместить все css в голову, но ошибка все еще возникает - как только css-link получает заголовок = "", он не будет распознан. когда css включен в головку, а не в нижней части тела, он прямо показывает загрузочный CSS-код по умолчанию, не показывая пользовательский css не менее 1 секунды. Я просмотрел plunker, который вы добавили. он работает в хроме, но не в firefox. – pigsound

Я протестировал его с помощью Chrome, Firefox и Edge на ПК.На Mac я тестировал Chrome, Firefox и Safari. Никаких проблем. Используете ли вы WordPress, Drupal, Joomla или другие CMS? Обычно принято размещать все стили в голове, особенно ссылки, поэтому я не говорю, что у вас слишком много таблиц стилей. http://stackoverflow.com/a/18449119/2813224 – zer00ne

Извините, я был неточен: я открыл ваш плункер на ПК в firefox и chrome и увидел, что в firefox это не сработало. спасибо за помощь и совет, я продолжу попытки. – pigsound

css style switcher для bootstrap

ответ

Смежные вопросы