Выбор и манипуляция псевдоэлементами CSS ::before и ::after с помощью JavaScript (или jQuery)
Вопрос на русском для StackOverflow.com:
Есть ли способ выбора/манипуляции с CSS псевдоэлементами, такими как ::before и ::after (и старая версия с одной точкой с запятой) с использованием jQuery?
Например, в моем файле стилей есть следующее правило:
.span::after { content: 'foo'; }
Как я могу изменить 'foo' на 'bar' с использованием чистого JavaScript или jQuery?
5 ответ(ов)
Вы также можете передать содержимое в псевдоэлемент с помощью атрибута данных, а затем использовать jQuery для манипуляций с этим:
В HTML:
<span>foo</span>
В jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
В CSS:
span:after {
content: attr(data-content) ' любой другой текст, который вы хотите';
}
Если вы хотите предотвратить появление 'другого текста', вы можете объединить это с решением seucolega следующим образом:
В HTML:
<span>foo</span>
В jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
В CSS:
span.change:after {
content: attr(data-content) ' любой другой текст, который вы хотите';
}
Таким образом, при наведении на элемент у вас будет возможность динамически изменять содержимое псевдоэлемента.
Если вы хотите полностью управлять псевдоэлементами ::before или ::after только с помощью CSS, вы можете использовать JavaScript. Вот пример:
jQuery('head').append('<style id="mystyle" type="text/css"> /* ваши стили здесь */ </style>');
Обратите внимание, что элемент <style> имеет идентификатор, который можно использовать для его удаления и добавления снова, если ваши стили меняются динамически.
Таким образом, ваш элемент будет стилизован именно так, как вам нужно, с помощью CSS и небольшого вклада JavaScript.
Спасибо всем! Я справился с тем, что хотел 😄 Вот ссылка: http://jsfiddle.net/Tfc9j/42/. Загляните!
Я хотел, чтобы непрозрачность внешнего блока отличалась от непрозрачности внутреннего блока и менялась по клику в другом месте. Спасибо!
Использовал следующий код:
$('#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" data-before="Click me!">
<div id="duo">
<p>ena p</p>
<p id="duop">duoyyyyyyyyyyyyyy p</p>
</div>
</div>
Надеюсь, это поможет тем, кто сталкивается с похожими задачами!
В духе предложенного Кристианом, вы также можете сделать следующее:
$('head').append("<style>.span::after{ content:'bar' }</style>");
Этот код добавляет новый стиль в <head> вашего документа, который добавляет содержимое "bar" после любого элемента с классом .span. Убедитесь, что ваш селектор соответствует элементам, к которым вы хотите применить стиль.
Вот как можно получить доступ к стилям :after и :before, определённым в CSS:
// Получить значение цвета у .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Получить значение контента у .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
Этот код позволит вам получить свойства, заданные для псевдоэлемента :before, такие как цвет и содержимое.
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как выбрать элемент с несколькими классами в jQuery?
Получение выбранного текста из выпадающего списка (select) с помощью jQuery
Как получить дочерние элементы селектора $(this)?
Как выбрать элемент по имени с помощью jQuery?