Вопросы Теги

Как меняться:: after и:: before элемента с Javascript?

Нуждался в том, чтобы изменить признак 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...
3
задан 22.11.2016, 01:51
4 ответа

Ты можешь готовить:: after и:: before для того, чтобы они загрузили по умолчанию контент признака.

В примере я использовал признак "title": 

#text::after{
  content: attr(title);
}

И despuГ©s это обновлять с Javascript. 

document.querySelector("#text").setAttribute("title" , "Nuevo texto")

или 

document.querySelector("#text").title = "Nuevo texto";
4
ответ дан 24.11.2019, 12:29
  • 1
    Хороший ответ, я думаю, что title не лучший elecció n, потому что у него есть боковые эффекты (tooltip на элементе), что может не желаться, и как эта té cnica функционируй с любым другим признаком - даже одним не стандартом - возможно, было бы лучше использовать один data-*. Salu2 –  rnrneverdies 22.11.2016, 15:10
  • 2
    Большое спасибо, с этим я смог добиваться того, что я предложил себе. –  akko 27.11.2016, 08:43

К несчастью, не возможно выбирать ни менять 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");
2
ответ дан 24.11.2019, 12:29

Как уже они сказали, что не возможно менять 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>
2
ответ дан 24.11.2019, 12:29

Что-то, что, если ты можешь делать, состоит в том, чтобы создавать элемент <style id="myStyle">, внутри которого ты мог бы добавлять контент посередине выполнения и так иметь немного больший контроль ее situaciГіn. Я это использовал и функционируй лучшего.

0
ответ дан 24.11.2019, 12:29