Как изменить цвет фона: после псевдо класса с jQuery? [Дубликат]
Это возможно с амперсандом в SASS:
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
вывод CSS:
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
22 ответа
Вы также можете передать содержимое псевдоэлементу атрибуту данных, а затем использовать jQuery для управления этим:
В HTML:
<span>foo</span>
В jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
В CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
Если вы хотите, чтобы «другой текст» не отображался, вы могли бы объединить это с решением seucolega следующим образом:
В HTML:
<span>foo</span>
В jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
В CSS:
span.change:after {
content: attr(data-content) ' any other text you may want';
}
Это непрактично, поскольку я не писал это для использования в реальном мире, просто чтобы дать вам пример того, что может быть достигнуто.
css = {
before: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
} else {
$("#cust_style").remove();
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
}
}, after: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
}
}
}
это добавление в настоящее время добавляет элемент или добавляет элемент Style, который содержит необходимый атрибут, который будет влиять на элемент target после элемента Pseudo.
это можно использовать как
css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after
и
css.before( ... ); // to affect the before pseudo element.
как после: и до: псевдоэлементы не доступны непосредственно через DOM, в настоящее время невозможно отредактировать конкретные значения css свободно.
мой путь был всего лишь примером, и он не очень хорош для практики, вы можете изменить его, попробовать некоторые из своих собственных трюков и сделать его правильным для использования в реальном мире.
, так что сделайте собственные эксперименты с этим и другими!
приветствует - Адарш Хедде.
Спасибо всем! мне удалось сделать то, что я хотел: D http://jsfiddle.net/Tfc9j/42/ вот посмотрите
я хотел иметь непрозрачность внешнего div для быть отличным от непрозрачности внутреннего div и это изменение с помощью щелчка где-то еще;) Спасибо!
$('#ena').on('click', function () {
$('head').append("<style>#ena:before { opacity:0.3; }</style>");
});
$('#duop').on('click', function (e) {
$('head').append("<style>#ena:before { opacity:0.8; }</style>");
e.stopPropagation();
});
#ena{
width:300px;
height:300px;
border:1px black solid;
position:relative;
}
#duo{
opacity:1;
position:absolute;
top:50px;
width:300px;
height:100px;
background-color:white;
}
#ena:before {
content: attr(data-before);
color: white;
cursor: pointer;
position: absolute;
background-color:red;
opacity:0.9;
width:100%;
height:100%;
}
<div id="ena">
<div id="duo">
<p>ena p</p>
<p id="duop">duoyyyyyyyyyyyyyy p</p>
</div>
</div>
-
1
-
2+1. Это именно то, что я искал, чтобы изменить непрозрачность div. Другие ответы очень тщательны, но все они сосредоточены на добавлении стилей, а не на модификации существующих. Спасибо! – scott 18 January 2017 в 19:02
-
3Остерегайтесь: здесь вы добавляете тег стиля в голову каждый раз, когда обрабатывается один из этих кликов. Я бы скорректировал способ удаления старого, прежде чем добавлять новый. – pupitetris 27 October 2017 в 15:22
Вы можете создать фальшивое свойство или использовать существующее и наследовать его в таблице стилей псевдоэлемента.
var switched = false;
// Enable color switching
setInterval(function () {
var color = switched ? 'red' : 'darkred';
var element = document.getElementById('arrow');
element.style.backgroundColor = color;
// Managing pseudo-element's css
// using inheritance.
element.style.borderLeftColor = color;
switched = !switched;
}, 1000);.arrow {
/* SET FICTIONAL PROPERTY */
border-left-color:red;
background-color:red;
width:1em;
height:1em;
display:inline-block;
position:relative;
}
.arrow:after {
border-top:1em solid transparent;
border-right:1em solid transparent;
border-bottom:1em solid transparent;
border-left:1em solid transparent;
/* INHERIT PROPERTY */
border-left-color:inherit;
content:"";
width:0;
height:0;
position:absolute;
left:100%;
top:-50%;
}<span id="arrow" class="arrow"></span>Кажется, что это не работает для свойства content: (
Вы не можете выбирать псевдо элементы в jQuery, потому что они не являются частью DOM. Но вы можете добавить определенный класс к элементу отца и управлять его псевдоэлементами в CSS.
В jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
В CSS:
span.change:after { content: 'bar' }
-
1Я пытаюсь динамически устанавливать значения глификона (т. Е. Через их шестнадцатеричные значения) в :: после psedo. content: element (например, content: & quot; \ e043 & quot ;;). он, похоже, не работает для меня, поэтому я предполагаю, что он не работает для шестнадцатеричных значений для глификонов? – user2101068 19 June 2015 в 17:05
-
2@ user2101068 Вы должны опубликовать это как новый вопрос. Мне нужно будет увидеть весь код, который вы используете. – Blazemonger 19 June 2015 в 17:41
-
3Blazemonger, спасибо за быстрый ответ. К сожалению, есть довольно много кода, и потребовалось бы немало усилий, чтобы вырвать соответствующий код. Я уже провел 12 часов, пытаясь получить эту работу, и это было моим последним вздохом, чтобы заставить его работать. Мне нужно сократить мои потери. Я надеялся, что вы сможете просто подтвердить мое предположение re: hex значения при использовании техники, описанной выше в # 3 (до фрагмента кода). Я могу вставить шестнадцатеричную строку в элементе контента, но она отображает текст для шестнадцатеричного значения глификона, а не фактический глификон. Впечатление без просмотра всего кода? – user2101068 19 June 2015 в 18:20
-
4@ user2101068 Не используйте шестнадцатеричную строку; вместо этого скопируйте и вставьте фактический символ Юникода в атрибут HTML. jsfiddle.net/mblase75/Lcsjkc5y – Blazemonger 19 June 2015 в 19:06
-
5относительно решения 2. & amp; 3. На самом деле вы можете предотвратить рост таблиц стилей (более), если вы используете: document.styleSheets [0] .insertRule (правило, индекс), а затем с помощью этого индекса вы можете удалить правила, когда они не нужны: document.styleSheets [0]. deleteRule (индекс) – Picard 2 September 2016 в 10:58
Хотя они отображаются браузерами через CSS, как если бы они были похожи на другие реальные элементы DOM, сами псевдоэлементы не являются частью DOM, потому что псевдоэлементы, как следует из названия, не являются реальными элементами, и поэтому вы не могут выбирать и манипулировать ими напрямую с помощью jQuery (или любых JavaScript-API, если не на самом деле Selectors API ). Это относится к любым псевдоэлементам, стили которых вы пытаетесь модифицировать с помощью скрипта, а не только ::before и ::after.
Вы можете получать только стили псевдоэлементов непосредственно во время выполнения через CSSOM (думаю, window.getComputedStyle()), который не подвергается jQuery за пределами .css(), метод, который также не поддерживает псевдоэлементы.
Вы всегда можете найти другие пути вокруг него, хотя для Пример:
- Применение стилей к псевдоэлементам одного или нескольких произвольных классов, а затем переключение между классами (см. seucolega's answer для быстрого примера) - это идиоматический способ, поскольку он использует простые селекторы (которые псевдоэлементы не являются), чтобы различать элементы и состояния элементов, как они предназначены для использования
- Манипулирование стилей, применяемых к указанному псевдо -elements, изменив таблицу стилей документов, которая намного больше взломана
один рабочий, но не очень эффективный способ - добавить правило в документ с новым контентом и ссылаться на него с классом. в зависимости от того, что необходимо, для класса может потребоваться уникальный идентификатор для каждого значения в содержимом.
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
Я уже ответил на этот вопрос здесь , но, чтобы быть супер-крутым, я повторюсь для вас.
Ответ должен быть Да & amp; Нет . Вы не можете выбрать элемент с помощью псевдоселектора, но вы можете добавить новое правило в таблицу стилей с помощью javascript.
Я сделал что-то, что должно сработать для вас:
var addRule = function(sheet, selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
};
addRule(document.styleSheets[0], "body:after", "content: 'foo'");
-
1– BoltClock♦ 12 May 2013 в 13:26
-
2
-
3@BoltClock Я понимаю, откуда вы, но есть случаи, когда у вас будут одинаковые или похожие ответы на разные вопросы. В этом случае ответ содержит небольшую часть более крупного блока информации, применимого к этому вопросу, а затем он ссылается на свой другой ответ для получения дополнительной информации. – 1.21 gigawatts 30 January 2018 в 06:46
-
4@ 1.21 гигаватт: Я согласен. Я не помню, посмотрел ли я на другой ответ, но я должен был предположить, что это был полный ответ, и они просто скопировали его оптом, и в этом случае я ошибся. Цитирование только соответствующей части должно быть прекрасным - я бы рекомендовал добавить markquote-разметку, но это, конечно, не относится к делу. Идеальный сценарий по-прежнему заключался бы в том, чтобы просто получить здесь весь оригинальный ответ, поскольку это каноническая повторяющаяся цель. – BoltClock♦ 30 January 2018 в 06:49
Вот HTML:
<div class="icon">
<span class="play">
::before
</span>
</div>
Вычисленный стиль в 'before' был content: "VERIFY TO WATCH";
Вот мои две строки jQuery, в которых используется идея добавления дополнительный класс, который специально ссылается на этот элемент, а затем добавляет тег стиля (с важным тегом) для изменения CSS значения содержимого sudo-элемента:
$("span.play:eq(0)").addClass('G');
$('body').append("<style>.G:before{content:'NewText' !important}</style>");
Зачем добавлять классы или атрибуты, когда вы можете просто добавить style в голову
$('head').append('<style>.span:after{ content:'changed content' }</style>')
В строке того, что предлагает христианин, вы также можете сделать:
$('head').append("<style>.span::after{ content:'bar' }</style>");
-
1
-
2Здесь должен быть добавлен id-атрибут, поэтому элемент может быть выбран и удален до добавления нового. Если нет, может возникнуть множество ненужных стилей-узлов. – K.S. 20 September 2016 в 13:00
Здесь много ответов, но никакой ответ не помогает манипулировать css :before или :after, даже не принятым.
Вот как я предлагаю это сделать. Предположим, что ваш HTML выглядит следующим образом:
<div id="something">Test</div>
И затем вы устанавливаете его: раньше в CSS и проектируете его так:
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
Обратите внимание, что я также установил content в самом элементе, чтобы вы могли легко вынести его позже. Теперь есть button щелчок по которому, вы хотите изменить цвет: до зеленого и его размер шрифта до 30 пикселей. Вы можете достичь этого следующим образом:
Определить css с вашим необходимым стилем в каком-то классе .activeS:
.activeS:before{
color:green !important;
font-size:30px !important;
}
Теперь вы можете изменить: перед стилем, добавив класс в ваш: перед элементом следующим образом:
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
Если вы хотите получить контент :before, это можно сделать как:
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
В конечном счете, если вы хотите динамически изменяйте содержимое :before с помощью jQuery, вы можете достичь этого следующим образом:
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
Нажатие на кнопку «changeBefore» изменит :before содержимое #something на «22», что является динамическое значение.
Надеюсь, это поможет
Вот способ доступа: свойства after и: before style, определенные в css:
// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
-
1
$('.span').attr('data-txt', 'foo');
$('.span').click(function () {
$(this).attr('data-txt',"any other text");
}).span{
}
.span:after{
content: attr(data-txt);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>Мы также можем полагаться на пользовательские свойства CSS (переменные) , чтобы манипулировать псевдоэлементом. Мы можем прочитать в спецификации , что:
Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с обычным наследованием и каскадными правилами, может быть обусловлено @media и другими условными правилами, может использоваться в атрибуте стиля HTML, может быть прочитан или задан с использованием CSSOM и т. д.
. Учитывая это, идея состоит в том, чтобы определить пользовательское свойство внутри элемента и псевдоэлемент просто наследует его; таким образом, мы можем легко изменить его:
1) Использование встроенного стиля:
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }<div class="box"></div> <div class="box" style="--color:blue"></div> <div class="box" style="--color:black"></div> <div class="box" style="--color:#f0f"></div>2) Использование CSS и классы
.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; } .blue { --color:blue; } .black { --color:black; }<div class="box"></div> <div class="box black" ></div> <div class="box blue"></div>3) Использование javascript
document.querySelectorAll('.box')[0].style.setProperty("--color", "blue"); document.querySelectorAll('.box')[1].style.setProperty("--color", "#f0f");.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }<div class="box"></div> <div class="box"></div> <div class="box"></div>4) Использование jQuery
$('.box').eq(0).css("--color", "blue"); /* the css() function with custom properties works only with a jQuery vesion >= 3.x with older version we can use style attribute to set the value. Simply pay attention if you already have inline style defined! */ $('.box').eq(1).attr("style","--color:#f0f");.box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; }<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div class="box"></div> <div class="box"></div> <div class="box"></div>
Он также может использоваться со сложными значениями:
.box { --c:"content"; --b:linear-gradient(red,blue); --s:20px; --p:0 15px; } .box:before { content: var(--c); background:var(--b); color:#fff; font-size: calc(2 * var(--s) + 5px); padding:var(--p); }<div class="box"></div>
-
1Большое вам спасибо за то, что вы делаете это элегантно и используете простой javascript. Я собираюсь использовать этот шаблон сейчас. – Metagrapher 15 May 2018 в 05:05
-
2Отличные решения, спасибо! Я застрял с версией jQuery для заказа (так что это не сработало), но переход на обычный JS работает как шарм. – akalata 7 August 2018 в 15:15
-
3@akalata да, код требует jQuery версии 3.x .. Я добавил дополнительные сведения и другую альтернативу с jQuery;) – Temani Afif 7 August 2018 в 15:27
-
4– connexo 6 September 2018 в 21:20
-
5– Temani Afif 6 September 2018 в 21:25
ЕСЛИ вы хотите полностью управлять элементами :: before или :: after sudo через CSS, вы можете сделать это JS. См. Ниже:
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
Обратите внимание, что элемент <style> имеет идентификатор, который вы можете использовать для его удаления, и добавьте его снова, если ваш стиль динамически изменяется.
Кстати, ваш элемент точно соответствует вашему желанию с помощью CSS с помощью JS.
-
1это очень здорово по другой причине: если вы создаете плагин jquery и не хотите требовать включения таблицы стилей, но должны предопределять определенные стили, это отличный способ сделать это! – ekkis 28 September 2014 в 01:41
Вы можете использовать мой плагин для этой цели.
JQuery:
(function() {
$.pseudoElements = {
length: 0
};
var setPseudoElement = function(parameters) {
if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
for (var element of parameters.elements.get()) {
if (!element.pseudoElements) element.pseudoElements = {
styleSheet: null,
before: {
index: null,
properties: null
},
after: {
index: null,
properties: null
},
id: null
};
var selector = (function() {
if (element.pseudoElements.id !== null) {
if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);
return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;
} else {
var id = $.pseudoElements.length;
$.pseudoElements.length++
element.pseudoElements.id = id;
element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
};
})();
if (!element.pseudoElements.styleSheet) {
if (document.styleSheets[0]) {
element.pseudoElements.styleSheet = document.styleSheets[0];
} else {
var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
element.pseudoElements.styleSheet = styleSheet.sheet;
};
};
if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {
element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);
};
if (typeof parameters.argument === 'object') {
parameters.argument = $.extend({}, parameters.argument);
if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;
element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
};
var properties = '';
for (var property in parameters.argument) {
if (typeof parameters.argument[property] === 'function')
element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
else
element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
};
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
} else if (parameters.argument !== undefined && parameters.property !== undefined) {
if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;
element.pseudoElements[parameters.pseudoElement].properties = {};
};
if (typeof parameters.property === 'function')
element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
else
element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);
};
};
return $(parameters.elements);
} else if (parameters.argument !== undefined && parameters.property === undefined) {
var element = $(parameters.elements).get(0);
var windowStyle = window.getComputedStyle(
element, '::' + parameters.pseudoElement
).getPropertyValue(parameters.argument);
if (element.pseudoElements) {
return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
} else {
return windowStyle || null;
};
} else {
console.error('Invalid values!');
return false;
};
};
$.fn.cssBefore = function(argument, property) {
return setPseudoElement({
elements: this,
pseudoElement: 'before',
argument: argument,
property: property
});
};
$.fn.cssAfter = function(argument, property) {
return setPseudoElement({
elements: this,
pseudoElement: 'after',
argument: argument,
property: property
});
};
})();
$(function() {
$('.element').cssBefore('content', '"New before!"');
});.element {
width: 480px;
margin: 0 auto;
border: 2px solid red;
}
.element::before {
content: 'Old before!';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="element"></div>Значения должны быть указаны, как в обычной функции jQuery.css
Кроме того, вы также можете получить значение параметра псевдоэлемента, как в обычной функции jQuery.css:
console.log( $(element).cssBefore(parameter) );
JS:
(function() {
document.pseudoElements = {
length: 0
};
var setPseudoElement = function(parameters) {
if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {
if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {
styleSheet: null,
before: {
index: null,
properties: null
},
after: {
index: null,
properties: null
},
id: null
};
var selector = (function() {
if (parameters.element.pseudoElements.id !== null) {
if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);
return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;
} else {
var id = document.pseudoElements.length;
document.pseudoElements.length++
parameters.element.pseudoElements.id = id;
parameters.element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;
};
})();
if (!parameters.element.pseudoElements.styleSheet) {
if (document.styleSheets[0]) {
parameters.element.pseudoElements.styleSheet = document.styleSheets[0];
} else {
var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
parameters.element.pseudoElements.styleSheet = styleSheet.sheet;
};
};
if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {
parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);
};
if (typeof parameters.argument === 'object') {
parameters.argument = (function() {
var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};
for (var property in parameters.argument) {
cloneObject[property] = parameters.argument[property];
};
return cloneObject;
})();
if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;
};
var properties = '';
for (var property in parameters.argument) {
if (typeof parameters.argument[property] === 'function')
parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();
else
parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];
};
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
} else if (parameters.argument !== undefined && parameters.property !== undefined) {
if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {
var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;
parameters.element.pseudoElements[parameters.pseudoElement].properties = {};
};
if (typeof parameters.property === 'function')
parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();
else
parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {
properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';
};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);
};
} else if (parameters.argument !== undefined && parameters.property === undefined) {
var windowStyle = window.getComputedStyle(
parameters.element, '::' + parameters.pseudoElement
).getPropertyValue(parameters.argument);
if (parameters.element.pseudoElements) {
return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;
} else {
return windowStyle || null;
};
} else {
console.error('Invalid values!');
return false;
};
};
Object.defineProperty(Element.prototype, 'styleBefore', {
enumerable: false,
value: function(argument, property) {
return setPseudoElement({
element: this,
pseudoElement: 'before',
argument: argument,
property: property
});
}
});
Object.defineProperty(Element.prototype, 'styleAfter', {
enumerable: false,
value: function(argument, property) {
return setPseudoElement({
element: this,
pseudoElement: 'after',
argument: argument,
property: property
});
}
});
})();
document.querySelector('.element').styleBefore('content', '"New before!"');.element {
width: 480px;
margin: 0 auto;
border: 2px solid red;
}
.element::before {
content: 'Old before!';
}<div class="element"></div>GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/
Кто-то еще прокомментировал добавление элемента head с полным элементом стиля, и это неплохо, если вы делаете это только один раз, но если вам нужно сбросить его более одного раза, вы получите массу элементов стиля , Поэтому, чтобы предотвратить создание явного элемента стиля в голове с идентификатором и заменить его innerHTML следующим образом:
<style id="pseudo"></style>
Тогда JavaScript будет выглядеть так:
var pseudo = document.getElementById("pseudo");
function setHeight() {
let height = document.getElementById("container").clientHeight;
pseudo.innerHTML = `.class:before { height: ${height}px; }`
}
setHeight()
Теперь в моем случае мне нужно было установить высоту элемента before, основанного на высоте другого, и он изменится при изменении размера, поэтому с помощью этого я могу запускать setHeight() каждый раз при изменении размера окна, и он заменит <style>.
Надеюсь, это поможет кому-то, кто застрял в попытке сделать то же самое.
attr(), слишком плохо, что я не смог использовать его с другими свойствами, чемcontent. Demo – Maksim Vi. 20 January 2012 в 03:05attr()за пределами CSS2, тогда как сам CSS2attr()был определен только для свойстваcontent. – BoltClock♦ 8 February 2012 в 17:49:before, он поддерживаетattr()в CSS – Blazemonger 17 June 2015 в 13:34