Как автоматически переключать таблицы стилей с помощью jQuery? - PullRequest
Новая
       2

Как автоматически переключать таблицы стилей с помощью jQuery?

0 голосов
/ 09 февраля 2012

Я попробую еще раз спросить.Мой вопрос был удален один раз, по-видимому, из-за того, что подобный вопрос уже задавался.Он был снова удален при публикации в качестве ответа на аналогичный вопрос, очевидно, из-за недостаточной схожести.

Мой вопрос:

Это (решение для «аналогичного вопроса», ссылка выше)кросс-браузер совместим, т.е. работает ли он во всех браузерах?Кроме того, что следует добавить в файл jQuery для автоматического переключения таблиц стилей (светлый стиль для светлых часов и темный стиль для ночного времени)?

* Если .js используется для файлов javascript,используется .jq для jQuery?Я впервые вижу решение jQuery, так как обычно я набираю javascript в поисковой системе ol.

Надеюсь, на этот вопрос получен ответ, и он не будет удален в третий раз.

Ответы [ 4 ]

2 голосов
/ 09 февраля 2012

Вам не нужно переключать таблицы стилей, вам просто нужно переключать стили. 

<body class='day'>

<body class='night'>

тогда вы можете иметь: 

.day {
    background-color:#ffffff
}

.night {
    background-color:#808080
}

Затем вы можете управлять этим с помощью: 

$('body').removeClass('day')
$('body').removeClass('night')

Оберните немного логики, основанной на дате и времени, и вы готовы к работе.

Вы можете также подклассить другие элементы страницы, как это, чтобы продолжить тему: 

.day h1 { ...  }
.night h1 { ... }
1 голос
/ 09 февраля 2012

Ответ Диодия, вероятно, лучший выбор, но так как это не то, о чем вы просили, я дал код ниже.Тем не менее, я думаю, вы должны НАСТОЯТЕЛЬНО рассмотреть вопрос о ответе Диодия.

Является ли это (решение для «аналогичного вопроса», ссылка выше) кросс-браузерным, то есть работает ли это во всехбраузеры?

Да.Я должен работать в большинстве современных браузеров.

Кроме того, что нужно добавить в файл jQuery для автоматического переключения таблиц стилей (светлый стиль для дневных часов и темный стиль для ночного)?

Я не уверен, что вы имеете в виду "добавлено в файл jQuery".Вы ничего не добавляете в файл jQuery, вы просто ссылаетесь на него, после чего в вашем javascript становится доступным jQuery.

, поэтому для изменения стиля в зависимости от времени суток у вас будет что-то подобное: 

<link type="text/css" rel="stylesheet" id="timeofdaystyle" href="day.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
  var d = new Date();
  var hour = d.getHours();
  if (hour < 8 || hour > 20) {
     //between 8pm and 8am
     $('#timeofdaystyle').attr('href', 'night.css');
  } else {
     /* this is unnecessary really, because you already have it set to day.css, 
      but I'll add it as an example */
     $('#timeofdaystyle').attr('href', 'day.css');
  }
});
</script>

* Если .js используется для файлов javascript, используется ли .jq для jQuery?Я впервые вижу решение jQuery, поскольку обычно я набираю javascript в поисковой системе ol.

Нет, файлы .js используются для всего JavaScript.jQuery - это JavaScript, для этого используется расширение .js.

Надеюсь, это поможет.

1 голос
/ 09 февраля 2012

jQuery - это инфраструктура Javascript, что означает, что он абстрагирует некоторые базовые и низкоуровневые функции Javascript, поэтому его проще использовать для более сложных вещей, таких как эффекты пользовательского интерфейса, HTTP-запросы и манипулирование DOM.Но действительно, они оба имеют расширение .js.

Тем не менее, я бы предложил альтернативное, более легкое решение, чем переключение реальной таблицы стилей, что позволит избежать дополнительных сетевых запросов. Некоторое время назад я писал об этом простом методе , и он занимает только одну строчку jQuery.

0 голосов
/ 09 февраля 2012

Я бы не стал переключать таблицы стилей.Я хотел бы добавить класс к телу, а затем переключить этот класс.если у вас есть 2 таблицы стилей.один, скажем, мобильный, другой, имеющий стили рабочего стола, это просто вопрос определения браузера и изменения класса корпуса.Он совместим с разными браузерами и не является головной болью для написания.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...