Использование Javascript в CSS

Можно ли использовать Javascript внутри CSS?

Если да, можете ли вы привести простой пример?

Ответы

Ответ 1

IE и Firefox содержат способы выполнения JavaScript из CSS. Как отмечает Паоло, одним из способов в IE является метод expression, но также более темное поведение HTC, в котором отдельный CSS, содержащий ваш script, загружается через CSS. Аналогичный метод для Firefox существует, используя XBL. Эти методы не вызывают JavaScript непосредственно из CSS, но эффект тот же.

HTC с IE

Используйте правило CSS так:

body {
  behavior:url(script.htc);
}

и в этом файле script.htc есть что-то вроде:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

Файл HTC выполняет функцию main() в событии ondocumentready (ссылаясь на готовность документа HTC).

XBL с Firefox

Firefox поддерживает аналогичный взлом XML- script, используя XBL.

Используйте правило CSS так:

body {
  -moz-binding: url(script.xml#mycode);
}

и внутри вашего script.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

Весь код в теге конструктора будет выполнен (хорошая идея обернуть код в разделе CDATA.)

В обоих методах код не выполняется, если селектор CSS не соответствует элементу внутри документа. Используя что-то вроде body, он будет немедленно выполняться при загрузке страницы.

Ответ 2

Я думаю, что вы можете думать о expressions или динамических свойствах, которые поддерживаются только IE и позволяют устанавливать свойство результата выражения javascript. Пример:

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Этот код заставляет IE эмулировать свойство max-width, которое он не поддерживает.

Все рассмотренные вещи, однако, избегают использования этих. Они плохие, плохие.

Ответ 3

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

styles.css.php:

body
 {
margin: 0px;
font-family: Verdana;
background-color: #cccccc;
background-image: url('<?php
echo 'images/flag_bg/' . $user_country . '.png';
?>');
 }

Это установило бы фоновое изображение на все, что было сохранено в переменной $user_country. Это только один пример динамического CSS; существуют практически неограниченные возможности при объединении кода CSS и серверного кода. Другим случаем было бы сделать что-то вроде разрешения пользователю создать пользовательскую тему, сохранить ее в базе данных, а затем с помощью PHP установить различные свойства, например:

user_theme.css.php:

body
 {
background-color: <?php echo $user_theme['BG_COLOR']; ?>;
color: <?php echo $user_theme['COLOR']; ?>;
font-family: <?php echo $user_theme['FONT']; ?>;
 }

#panel
 {
font-size: <?php echo $user_theme['FONT_SIZE']; ?>;
background-image: <?php echo $user_theme['PANEL_BG']; ?>;
 }

Еще раз, однако, это просто пример не в верхней части головы; использование возможности динамического CSS с помощью серверных скриптов может привести к довольно невероятным вещам.

Ответ 4

IE поддерживает выражения CSS:

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

но они не являются стандартными и не переносимы между браузерами. Избегайте их, если это возможно. Они устарели с IE8.

Ответ 5

Для более точного решения, используя Vue.

    var vue = new Vue({
      el : "#app",
      data: {
      styleObject: {
        color: 'red',
        fontSize: '20px'
      },
      activeColor: 'blue',
      activeColor2: 'green',
      fontSize: '30px'
      },
      methods : {
        color: function (color) {
          this.activeColor2 = color;
        }
      },
      mounted: function () {
        if(1 > 0) {
          this.color('gray');
        }
      }      
    })
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <ul id="app" :style="styleObject">
      <li>test</li>
      <li :style="{color: activeColor2, fontSize: fontSize}">test</li>
      <li>test</li>
      <li>test</li>
      <li :style="{color: activeColor, fontSize: fontSize}">test</li>
      <li>test</li>
      <li>test</li>
    </ul>

Ответ 6

Я столкнулся с аналогичной проблемой и разработал два автономных инструмента для выполнения этого:

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

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

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

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

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

И это в ваших on-page style атрибутах:

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

или

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

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

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

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

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

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

CjsSS.js и ngCss заняли среднюю позицию; вы уже знаете CSS, вы уже знаете Javascript, поэтому просто позволяйте им работать вместе простым, интуитивным способом.

Ответ 7

Не в обычном понимании фразы "внутри CSS".

Ответ 8

Это, оказывается, очень интересный вопрос. Если установлено более ста свойств, вы можете подумать, что вам будет разрешено вводить .cickable {onclick: "alert ('hi!');; } в вашем CSS, и это сработает. Он интуитивно понятен, он имеет такой смысл. Это было бы удивительно полезно при обезвреживании динамически генерируемых массивных пользовательских интерфейсов.

Проблема:
Полиция CSS в своей бесконечной мудрости нарисовала китайскую стену между представлением и поведением. Любой HTML-код, помеченный как-то, который специально не поддерживается CSS. (Полная таблица свойств)

Лучше всего использовать jQuery, который настраивает интерпретируемый движок в фоновом режиме для выполнения того, что вы пытались сделать с CSS в любом случае. См. Эту страницу: Добавить Javascript Onclick в .css файл.

Удачи.