Нуждался в том, чтобы изменить признак content pseudo элементы after и before следующего элемента HTML, не используя книжных магазинов как jQuery. Если бы он сделал что-то сходным с CSS, оно было бы немного этим:
#text::before{background:red;display:block,content:"HolaMundo";}
#text::after{background:blue;color:red,font-size:100px;}
Каковым был бы способ это делать с Javascript?
var text = document.getElementById("text");
text...
Ты можешь готовить:: after и:: before для того, чтобы они загрузили по умолчанию контент признака.
В примере я использовал признак "title":
#text::after{
content: attr(title);
}
И despuГ©s это обновлять с Javascript.
document.querySelector("#text").setAttribute("title" , "Nuevo texto")
или
document.querySelector("#text").title = "Nuevo texto";
К несчастью, не возможно выбирать ни менять psuedo элемент прямо с языком сценариев JavaScript. Однако, возможно делать с одной combinaciГіn CSS и языка сценариев JavaScript. Например, podrГ-схвати создавать какие-то классы с различными контентами в psuedo элемент, и использовать язык сценариев JavaScript, чтобы менять класс:
CSS:
#text::before {
content: "HolaMundo";
}
#text.nombre {
content: "Mi nombre es...";
}
язык сценариев JavaScript:
// Decir nombre
document.querySelector("#text").classList.add("nombre");
// Decir HolaMundo
document.querySelector("#text").classList.remove("nombre");
Как уже они сказали, что не возможно менять pseudo элемент, так как он не принадлежит DOM.
В следующем cГіdigo симулировал с помощью селекторов признака и немножко js
как podrГ, - чтобы реализовывать:
var text = document.getElementById('texto');
function changeToAfter(id) {
// Creamos el atributo data-class con el contenido after
document.getElementById(id).setAttribute('data-class', 'after');
}
function changeToBefore(id){
// Creamos el atributo data-class con el contenido before
document.getElementById(id).setAttribute('data-class', 'before');
}
document.getElementById('after').onclick = function() {
changeToAfter(text.id);
};
document.getElementById('before').onclick = function() {
changeToBefore(text.id);
};
[data-class=before]::before{
background: red;
content: 'Hello ';
background: red;
}
[data-class=after]::after {
content: ' world!';
background: pink;
}
/* solo para dar un poooco de estilo a los botones que están feísimos */
button {
outline: 0;
width: 100px;
margin-bottom: 5px;
cursor: pointer;
display: block;
}
button:hover {
background: gray;
}
<p id="texto"> wonderful </p>
<!-- Solo para simulación -->
<button id="before">Before</button>
<button id="after">After</button>
Что-то, что, если ты можешь делать, состоит в том, чтобы создавать элемент <style id="myStyle">
, внутри которого ты мог бы добавлять контент посередине выполнения и так иметь немного больший контроль ее situaciГіn. Я это использовал и функционируй лучшего.
title
не лучший elecció n, потому что у него есть боковые эффекты (tooltip на элементе), что может не желаться, и как эта té cnica функционируй с любым другим признаком - даже одним не стандартом - возможно, было бы лучше использовать одинdata-*
. Salu2 – rnrneverdies 22.11.2016, 15:10