Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2013, 19:40
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

Задать свойтво content для псевдоэллемента after
Вот собственно и вопрос .
Есть элемент div.
Как реализовать, чтобы div::after свойство content подтягивалось из переменной (назовем ее userVar).Причем userVar может меняться во время нахождения юзера на странице и вместе с ним должно меняться значение content.
Помогите,пожалуйста,кто знает. Удачного вечера)
Ответить с цитированием
  #2 (permalink)  
Старый 16.06.2013, 20:31
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

API для изменения свойств псевдоэлементов отсутствует. Поэтому замените свой псевдоэлемент на обычный элемент.
Если же задача принципиальная, то нужно динамически создавать элемент <style> и вставлять в него нужное правило.
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2013, 20:37
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

Да. Задача на самом деле принципиальная. Если Вам несложно,напишите,как это сделать через динамический стайл. Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2013, 21:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ну примерно в таком ключе надо работать. Код не тестировал. Часть кода нужна для поддержки 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>
Ответить с цитированием
  #5 (permalink)  
Старый 16.06.2013, 21:59
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

danik.js,
в опере не работает
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #6 (permalink)  
Старый 16.06.2013, 22:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от devote
в опере не работает
Да я хз если честно как оно должно быть. Не сталкивался с подобными задачами пока.
Ответить с цитированием
  #7 (permalink)  
Старый 16.06.2013, 22:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Вариант...
<!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>

Последний раз редактировалось рони, 16.06.2013 в 22:31.
Ответить с цитированием
  #8 (permalink)  
Старый 16.06.2013, 22:46
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

рони,
а ты видел что происходит в стилях, при таком использовании?
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: "ва";
}
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 16.06.2013, 22:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 16.06.2013 в 22:55.
Ответить с цитированием
  #10 (permalink)  
Старый 16.06.2013, 23:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
задать hover для элемента bushstas Элементы интерфейса 43 28.11.2019 14:39
как для File.openDialog задать папку Averin500 Events/DOM/Window 2 06.01.2013 00:40
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Задать атрибуты option для select KonstantinK Элементы интерфейса 2 22.12.2010 13:39