Задать свойтво content для псевдоэллемента after

[devote]

function queryStyleRule(selector) {
    var sheets = document.styleSheets,
        j, i = sheets.length,
        rules = [];
    for( ;i--; ) {
        try {
            rules = sheets[i].cssRules ? sheets[i].cssRules : sheets[i].rules ? sheets[i].rules : [];
        } catch(_e_) {
            rules = [];
        }
        for(j = rules.length; j--; ) {
            var sel = rules[j].selectorText.replace(/(^|[^:]):(after|before)/i, '$1::$2');
            if (sel.toLowerCase() === selector) {
                return rules[j];
            }
        }
    }
    var style = document.documentElement.firstChild.appendChild(document.createElement('style'));
    try {
        selector = selector.replace(/::(after|before)/, ':$1');
        if (style.sheet) {
            style.sheet.insertRule(selector + '{}', 0);
            return style.sheet.cssRules[0];
        } else if (style.styleSheet) {
            style.styleSheet.addRule(selector, ' ', 0);
            return style.styleSheet.rules[0];
        }
    } catch(_e_) {
        style.parentNode.removeChild(style);
    }
    return null;
}


queryStyleRule('body::after').style.content = '"Hello World!"';;

alert(queryStyleRule('body::after').style.content);

[devote]

<style>
    div:after {
        content: 'Этот текст будем получать с помощью метода queryStyleRule';
    }
</style>
<div>Во как! </div>
<input type="button" onclick="queryStyleRule('div::after').style.content='\'Вот мы его и заменили)))\'';" value="Заменить текст" />
<script>
function queryStyleRule(selector) {
    var sheets = document.styleSheets,
        j, i = sheets.length,
        rules = [];
    for( ;i--; ) {
        try {
            rules = sheets[i].cssRules ? sheets[i].cssRules : sheets[i].rules ? sheets[i].rules : [];
        } catch(_e_) {
            rules = [];
        }
        for(j = rules.length; j--; ) {
            var sel = rules[j].selectorText.replace(/(^|[^:]):(after|before)/i, '$1::$2');
            if (sel.toLowerCase() === selector) {
                return rules[j];
            }
        }
    }
    var style = document.documentElement.firstChild.appendChild(document.createElement('style'));
    try {
        selector = selector.replace(/::(after|before)/, ':$1');
        if (style.sheet) {
            style.sheet.insertRule(selector + '{}', 0);
            return style.sheet.cssRules[0];
        } else if (style.styleSheet) {
            style.styleSheet.addRule(selector, ' ', 0);
            return style.styleSheet.rules[0];
        }
    } catch(_e_) {
        style.parentNode.removeChild(style);
    }
    return null;
}

alert('Текущий текст у псевдо-элемента: ' + queryStyleRule('div::after').style.content);
</script>

[рони]

devote,

[danik.js]

Мой вариант, без поиска существующих правил, исправленный:

<script>
var addRule =  (function(){
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = head.appendChild(document.createElement('style'));
    var styleSheet = style.sheet || style.styleSheet;
    var cssRules = styleSheet.cssRules || styleSheet.rules;

    return function(selector) {
        if (styleSheet.insertRule) {
            styleSheet.insertRule(selector + '{}', cssRules.length);
        } else {
            styleSheet.addRule(selector, ' ', cssRules.length);
        }
        return cssRules[cssRules.length - 1];
    }
})();
    
var pseudoRule = addRule('span:before');
var setPseudoContent = function(content) {
    pseudoRule.style.content = '"' + content + '"';
}
</script>
<input onkeyup="setPseudoContent(value)" />
Pseudo:<span></span>

Проверено в Opera, Firefox, Google Chrome, IE8, IE10.

addRule(selector, 'e:0;', 0);

Вот тут вроде бы достаточно пробел передать в качестве второго аргумента.

[devote]

Вот тут вроде бы достаточно пробел передать в качестве второго аргумента.

ну да, верно говоришь.. подправил свой код

[devote]

// почему-то style.content не работает в хроме.

любопытно почему у тебя не работает... у меня все гуд.. Может ты пытаешься назначить свойству просто значение вида:

style.content = 'ololo';

хотя по правилам нужно:

style.content = '"ololo"';
// или
style.content = 'attr(data-my-attr)';

[devote]

кстати о птичках.. а нафига такой хренью заниматься, если можно все упростить))

Для ИЕ8 обязательно должен присутствовать у спана атрибут, иначе ИЕ8 не будет обновлять значение

<style>
    span:before {
        content: attr(data-before-content);
    }
</style>
<input onkeyup="document.getElementById('spanId').setAttribute('data-before-content', this.value)" />
Pseudo:<span id="spanId" data-before-content="Начальное значение псевдо-элемента, может быть пустым значением"></span>

[danik.js]

любопытно почему у тебя не работает... у меня все гуд.. Может ты пытаешься назначить свойству просто значение вида..

Я - лох ((

нафига такой хренью заниматься, если можно все упростить

Блин, реально круто )

Кстати, как заэкранировать кавычку? В моем варианте текст с двойной кавычкой не проходит..

[devote]

Кстати, как заэкранировать кавычку? В моем варианте текст с двойной кавычкой не проходит..

просто использовать "

[devote]

Кстати, как заэкранировать кавычку? В моем варианте текст с двойной кавычкой не проходит..

И еще у меня прокатывает такой вариант:

style.content = JSON.stingify('Мой текст в "Кавычках" и \'одинарных\' тоже');