Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подключение CSS средствами javascript (https://javascript.ru/forum/dom-window/36206-podklyuchenie-css-sredstvami-javascript.html)

jegit 07.03.2013 14:55

Подключение CSS средствами javascript
 
Неправильно дал заголовок раздел - Создпние CSS таблиц средствами javascript

И так зачем же нужно средствами javascript создавать таблицы стилей?

Достоинства:
  1. Это увеличивает скорость загрузки документа.
  2. Создание полноценной таблицы стилей.
  3. Сокращение кода.

Недостатки:
  1. Форматирование кода.

Метод реализован в библиотеке jegit javascript - ссылка

Подключение:
<script type="text/javascript" src="jegit/jegit.js"></script>
<script type="text/javascript">
    // подключаем плагин styleSheet
    jegit.plugin( 'styleSheet' );
     
</script>

Синтаксис:
<script type="text/javascript">

jegit.styleSheet({

    'li > a:hover' : {
        'font-size' : '120%'
    }
});
     
</script>

Пример: добавление стилей до загрузки документа
<iframe scrolling="no" width="100%" frameborder="0" src="http://www.jegit.ru/iframe/plugins/styleSheet/1.html" name="iframe_44644760" style="height:100px;"></iframe>

Пример: добавление стилей по событию
<iframe scrolling="no" width="100%" frameborder="0" src="http://www.jegit.ru/iframe/plugins/styleSheet/2.html" name="iframe_44644760" style="height:140px;"></iframe>

Пример: удаление стилей
<iframe scrolling="no" width="100%" frameborder="0" src="http://www.jegit.ru/iframe/plugins/styleSheet/3.html" name="iframe_44644760" style="height:140px;"></iframe>

Пример: стилизованный alert метод
<iframe scrolling="no" width="100%" frameborder="0" src="http://www.jegit.ru/html/sample/alert/1.html" name="iframe_44644760" style="height:480px;"></iframe>

danik.js 07.03.2013 15:53

Цитата:

Сообщение от jegit
Это увеличивает скорость загрузки документа.

Чего? Это каким образом? Нафига мне документ без стилей?
Цитата:

Сообщение от jegit
Создание полноценной таблицы стилей.

А чем она полноценнее?
Цитата:

Сообщение от jegit
Сокращение кода.

Что именно сокращается?

Deff 07.03.2013 15:57

jegit,
:) В принципе можно добавлять контент в тег style и удалять,
прим. в ие не добавляются элементы с !important
А еще можно просто подгружать при необходимости через тег <link rel="stylesheet"
и добавлять - убирать атрибут disabled

jegit 07.03.2013 16:42

Вместо javascript onmouseover - CSS hover. Включи фантазию.

jegit 07.03.2013 16:45

danik.js

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

jegit 07.03.2013 16:46

да и причесон не испорть

danik.js 07.03.2013 17:24

Интересно, где имеет смысл держать css в javascript? А если где-то и имеет, то в большинстве случаев проще (и быстрее) применять стили прямо к элементу через свойство style. В общем для повышения скилов тебе сойдет, а для промышленного использования - только мазохистам )

Deff 07.03.2013 17:48

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

http://livetools.uiparade.com/button-builder.html


Часовой пояс GMT +3, время: 04:06.