Можно ли использовать 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 файл.
Удачи.