Форум

animatio · #1 (**permalink**) 16.06.2013, 19:40

Вот собственно и вопрос .
Есть элемент div.
Как реализовать, чтобы div::after свойство content подтягивалось из переменной (назовем ее userVar).Причем userVar может меняться во время нахождения юзера на странице и вместе с ним должно меняться значение content.
Помогите,пожалуйста,кто знает. Удачного вечера)

danik.js · #2 (**permalink**) 16.06.2013, 20:31

API для изменения свойств псевдоэлементов отсутствует. Поэтому замените свой псевдоэлемент на обычный элемент.
Если же задача принципиальная, то нужно динамически создавать элемент <style> и вставлять в него нужное правило.

animatio · #3 (**permalink**) 16.06.2013, 20:37

Да. Задача на самом деле принципиальная. Если Вам несложно,напишите,как это сделать через динамический стайл. Спасибо.

danik.js · #4 (**permalink**) 16.06.2013, 21:48

Ну примерно в таком ключе надо работать. Код не тестировал. Часть кода нужна для поддержки 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>

devote · #5 (**permalink**) 16.06.2013, 21:59

danik.js,
в опере не работает

danik.js · #6 (**permalink**) 16.06.2013, 22:02

Сообщение от devote

в опере не работает

Да я хз если честно как оно должно быть. Не сталкивался с подобными задачами пока.

рони · #7 (**permalink**) 16.06.2013, 22:28

Вариант...

<!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>

devote · #8 (**permalink**) 16.06.2013, 22:46

рони,
а ты видел что происходит в стилях, при таком использовании?

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: "ва";
}

рони · #9 (**permalink**) 16.06.2013, 22:52

Сообщение от devote

а ты видел что происходит в стилях, при таком использовании?

нет но знаю

рони · #10 (**permalink**) 16.06.2013, 23:03

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>

Форум

Справочник

Discord чат

Курсы javascript