Ввод JavaScript в CSS

Question

Я думал о чем-то. На моем форуме есть стандартные CSS-коды, из которых пользователи могут выбирать. Это меняет все от фона к цвету текста. У меня есть код JavaScript. Можно ли сделать так, чтобы javascript был частью CSS, чтобы, если определенный код CSS был по умолчанию, то частью этого является этот javascript?

Answer 1

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

Answer 2

Есть обходной путь ...

Он не помещает скрипт в чистый код CSS, но имеет скрипт для генерации CSS. В зависимости от того, какой язык сценариев вы используете (например, PHP), ваша ссылка на файл CSS должнавыглядит так:

<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" />

вы можете даже добавить такие параметры, как:

<link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" />

и в вашем файле styles.php, который должен выглядеть как CSS-файл с несколькими исключениями:

body {
     <?php if ( $_GET['type'] == 'main' ) echo color: BLACK; else color: RED; ?>
  ......... 
}

Answer 3

Я хотел выполнить то же самое (иметь переменные и некоторую логику обработки в CSS), что побудило меня разработать несколько автономных инструментов (один Angular и один V-JS):

• CjsSS.js - это инструмент Vanilla Javascript (поэтому нет внешних зависимостей), который поддерживает возврат к IE6.

• ngCss - это AngularМодуль + Фильтр + Фабрика (он же: плагин), который поддерживает Angular 1.2+ (так что вернемся к IE8)

Оба эти набора инструментов позволяют вам делать это в теге STYLE или внутривнешний * .css файл:

/*
<script src='external_logic.js'></script>
<script>
    var mainColor = "#cccccc";
</script>*/

BODY {
    color: /*{{mainColor}}*/;
}

А это у вас на странице style атрибуты:

<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div>

(или для ngCss)

<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div>

ПРИМЕЧАНИЕ. В ngCss вы также можете сделать $scope.mainColor вместо var mainColor

. По умолчанию Javascript выполняется в изолированном IFRAME, но на самом деле он ничем не отличается от того, как браузер обрабатывает ваш *.JS файлы.Просто убедитесь, что вы создали свой собственный CSS и разместили его на своем собственном сервере, тогда XSS не проблема.Но песочница обеспечивает гораздо большую безопасность и душевное спокойствие.

CjsSS.js и ngCss находятся где-то посередине между другими инструментами для выполнения аналогичных задач:

• LESS , SASS и Stylus являются только препроцессорами и требуют, чтобы вы изучали новый язык и манипулировали CSS.В основном они расширили CSS новыми языковыми возможностями.Все они также ограничены плагинами, разработанными для каждой платформы, в то время как CjsSS.js и ngCss позволяют вам включать любую библиотеку Javascript через <script src='blah.js'></script>.

• AbsurdJS виделте же проблемы с препроцессорами и пошли в обратную сторону;вместо того, чтобы расширять CSS, AbsurdJS создал библиотеку Javascript для генерации CSS без непосредственного прикосновения к CSS.

CjsSS.js и ngCss заняли среднюю позицию;вы уже знаете CSS, вы уже знаете Javascript, поэтому просто позвольте им работать вместе простым и интуитивно понятным способом.CjsSS.js может быть запущен на стороне сервера (через Node.js) для предварительной обработки CSS или оба могут быть запущены на стороне клиента.Вы также можете работать гибридным способом, где большинство переменных предварительно обрабатываются, а остальные выполняются на стороне клиента.