Изменение href таблицы стилей с помощью jQuery не совсем работает - PullRequest
Новая
       4

Изменение href таблицы стилей с помощью jQuery не совсем работает

1 голос
/ 09 июня 2010

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

Я добавил атрибут id в свою таблицу стилей, затем создал кнопку, используя событие toggle(), в котором я изменил атрибут href на нужный мне файл CSS.Файл CSS имеет несколько директив @import, так как я разбил стили на несколько файлов для удобства сопровождения.

Моя проблема заключается в том, что применяется только основной файл CSS.Я попытался использовать абсолютный путь в директивах @import, но не повезло.

Есть ли здесь какое-то исправление, которое я пропускаю, или мне нужно включить все в одном файле CSS?

Редактировать:

Иногда это проблема только в IE8, отлично работает в Chrome и Firefox.К сожалению, мой клиент хочет только IE8.Похоже, это дубликат этого вопроса.

Ответы [ 4 ]

0 голосов
/ 10 июня 2010

Простой ответ, вам нужно всего лишь сделать несколько добавлений в таблицу стилей.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Page</title>
  <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  <style type="text/css">
    * { font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, sans-serif; }
    body { font-size: 0.7em; margin: 0; }    
    div#themeContainer, div#themeContainer div, div#header, div#footer, div#content
    { margin: 0; padding: 0; }    
    div#content
    { text-align: center; }
    div#header
    { height: 103px; background: #88f; }
    div#footer
    { height: 60px; background: #f88; }
    div#content div.centered
    { margin: 0 auto; width: 900px; text-align: left; height: 200px; background: #ddd; }
    div#content div.centered h1
    { margin-top: 0px; }    
    div.dark
    { background: #ccc; }    
    div.dark div#header
    { background: #777; }
    div.dark div#footer
    { background: #777; }    
    div.dark div#content div.centered
    { background: #234; color: #ddd; }
    div.dark h1
    { color: #efe; }
    div.dark a
    { color: #fff; font-weight: bold; }
  </style>
</head>
<body>
  <div id="themeContainer">
    <div id="header">
      <p>
        Header gumpf</p>
    </div>
    <div id="content">
      <div class="centered">
        <div>
          <h1>
            Header</h1>
          <p>
            Some text</p>
          <a id="changeTheme" href="#">Click here to change theme</a>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>
        Footer gumpf</p>
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#changeTheme").click(function () {
        var container = $("#themeContainer");
        if (container.hasClass("dark"))
          container.removeClass("dark")
        else
          container.addClass("dark");
        return false;
      });
    });
  </script>
</body>
</html>
0 голосов
/ 09 июня 2010

По моему опыту, IE8 не любит распознавать определенные изменения после первоначального анализа DOM и применения стилей.Например, я вспоминаю, что у меня были проблемы с элементами, изначально установленными на «display: none», а затем я пытался изменить их с помощью jQuery.

Однако мой ответ был таким же, как у Стивена.окружающий свет - я полагаю, вы говорите о свете, попадающем на монитор.Если цель заключается не столько в стилизации, сколько в удобстве использования, вы можете попробовать процедурный обход, преобразовать цветовые и цветовые метки в HSB, изменить яркость, а затем вернуться к RBG / hex.Зависит от размера страниц, зависит от ваших требований, зависит от намерения.Вы можете прикрепить класс ко всем элементам, которые могут получить такое изменение.Что касается изображений, вы можете предварительно загрузить 2 изображения, накладывающиеся друг на друга, а затем отрегулировать яркость, переключая непрозрачность (например, бегунок между светлой копией / темной копией).

0 голосов
/ 09 июня 2010

Я действительно нашел ответ в этом вопросе , но мне пришлось сделать немного больше, чтобы это сработало для меня.Переключение выполняется для тега IMG с идентификатором ToggleStyle, поэтому мой код jQuery завершился таким образом: 

$( "#ToggleStyle" ).toggle(
    function() {
        $( "link" ).last().remove();
        document.createStyleSheet( "styles/light/master.css" );
        $( this ).attr( "src", "images/light/style.png" );
    },
    function() {
        $( "link" ).last().remove();
        document.createStyleSheet( "styles/dark/master.css" );
        $( this ).attr( "src", "images/dark/style.png" );
    }
);

В ответ на @dukebag да, я имел в виду легкое попадание на монитор,Это приложение будет использоваться 24/7, и они хотели низкоконтрастную тему для ночного времени.Несмотря на то, что мне нравится трансверсаль, таблицы стилей уже готовы, и, как и большинство проектов, время диктует самое быстрое, самое дешевое решение.

0 голосов
/ 09 июня 2010

У меня нет однозначного ответа, хотя я подозреваю, что @imports не запускается при изменении URL-адреса href.

Я бы выбрал другой подход - пометьте тело классом и измените класс при возникновении события toggle(). 

<body class="LightTheme">

тогда 

document.getElementsByTagName("body")[0].className = "DarkTheme";

Это, к сожалению, означает, что все стили для обеих тем должны быть доступны в CSS, а не загружать один или другой набор файлов CSS. Возможны и другие стратегии, включая принудительную перезагрузку страницы при изменении стиля, когда сервер записывает имя одной или другой темы в качестве класса для тела, например, <body class="${chosenTheme}">

...