Задать свойтво content для псевдоэллемента after
Вот собственно и вопрос .
Есть элемент div. Как реализовать, чтобы div::after свойство content подтягивалось из переменной (назовем ее userVar).Причем userVar может меняться во время нахождения юзера на странице и вместе с ним должно меняться значение content. Помогите,пожалуйста,кто знает. Удачного вечера) |
API для изменения свойств псевдоэлементов отсутствует. Поэтому замените свой псевдоэлемент на обычный элемент.
Если же задача принципиальная, то нужно динамически создавать элемент <style> и вставлять в него нужное правило. |
Да. Задача на самом деле принципиальная. Если Вам несложно,напишите,как это сделать через динамический стайл. Спасибо.
|
Ну примерно в таком ключе надо работать. Код не тестировал. Часть кода нужна для поддержки IE8. В вебкит почему то не получается напрямую установить pseudoRule.style.content ..
<script>
(function(){
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(document.createElement('style'));
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (styleSheet.insertRule) {
styleSheet.insertRule('span:before {}');
} else {
styleSheet.addRule('span:before', '');
}
var pseudoRule = (styleSheet.cssRules || styleSheet.rules)[0];
this.setPseudoContent = function(content) {
// почему-то style.content не работает в хроме.
pseudoRule.style.cssText = 'content:' + ['"','"'].join(content);
}
})();
</script>
<input onkeydown="setPseudoContent(value)" />
Pseudo:<span></span>
|
danik.js,
в опере не работает |
Цитата:
|
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
function setPseudoContent(value)
{
var style = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
style.innerHTML = "span:before { content: '"+value+"' }"
}
</script>
</head>
<body>
<input onkeyup="setPseudoContent(this.value)" />
<span> проверка</span>
</body>
</html>
|
рони,
а ты видел что происходит в стилях, при таком использовании?
span::before {
content: "впвавпавапвапва";
}
span::before {
content: "впвавпавапвапв";
}
span::before {
content: "впвавпавапвапв";
}
span::before {
content: "впвавпавапвап";
}
span::before {
content: "впвавпавапва";
}
span::before {
content: "впвавпавапв";
}
span::before {
content: "впвавпавап";
}
span::before {
content: "впвавпав";
}
span::before {
content: "впвавпав";
}
span::before {
content: "впвавпав";
}
span::before {
content: "впвав";
}
span::before {
content: "впвав";
}
span::before {
content: "впва";
}
span::before {
content: "впв";
}
span::before {
content: "вп";
}
span::before {
content: "вапвп";
}
span::before {
content: "вапвп";
}
span::before {
content: "вап";
}
span::before {
content: "вап";
}
span::before {
content: "ва";
}
|
Цитата:
|
devote,
Вариант...без повторов
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
function setPseudoContent(value)
{
var style = document.getElementById('style_before')
if(!style){
style = document.createElement('style');
style.id = 'style_before';
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
style.innerHTML = "span:before { content: '"+value+"' }"
}
</script>
</head>
<body>
<input onkeyup="setPseudoContent(this.value)" />
<span> проверка</span>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:22. |