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); |
<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,
:thanks: |
Мой вариант, без поиска существующих правил, исправленный:
<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. Цитата:
|
Цитата:
|
Цитата:
style.content = 'ololo'; хотя по правилам нужно: style.content = '"ololo"'; // или style.content = 'attr(data-my-attr)'; |
кстати о птичках.. а нафига такой хренью заниматься, если можно все упростить))
Для ИЕ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> |
Цитата:
Цитата:
Кстати, как заэкранировать кавычку? В моем варианте текст с двойной кавычкой не проходит.. |
Цитата:
|
Цитата:
style.content = JSON.stingify('Мой текст в "Кавычках" и \'одинарных\' тоже'); |
Часовой пояс GMT +3, время: 04:50. |