javascript修改节点是否有伪类选择器？

Question

 function myfunc(){ document.getElementById("bob").innerText += "azerty"; }

 #bob{ color: green; transition: all 1s; } #bob:modified{ /* ":modified" pseudo-class doesn't exists; I'm searching for the good one */ color: red; }

 <div>I would like the green text below to turn red when it changes and then green again.</div> <div id="bob">azerty</div> <button onclick="myfunc();">click to modify</button>

I want to create a transition when I modify the text of my node via javascript. Is there a selector for nodes whose content is modified?

I tried ":first-child" by deleting then recreating the node, and ":defined", but it did not work.

I would like the transition to apply when the text is changed.

Answer 1

as you use js an idea can be to add an attribute or a class to your element

bob.dataset.modified = true;
bob.classList.add('modified');

and use css selector to pass new style

 function myfuncClass() { const bob = document.getElementById("bob"); bob.innerText += "azerty"; bob.classList.add('modified'); } function myfunc() { const bob = document.getElementById("bob"); bob.innerText += "azerty"; bob.dataset.modified = true; }

 #bob { color: green; transition: all 1s; } #bob[data-modified] { color: red; } #bob.modified { color: blue; }

 <div>I would like the green text below to turn red when it changes and then green again.</div> <div id="bob">azerty</div> <button onclick="myfuncClass();">click to modify by adding class</button> <button onclick="myfunc();">click to modify by add an attribute</button>

Answer 2

I would use the Web Animations API for this, instead of CSS transitions:

 const el = document.getElementById("bob"); const [modifiedAnimation] = el.getAnimations(); modifiedAnimation.pause(); // don't run immediately function myfunc(){ el.innerText += "azerty"; modifiedAnimation.play(); }

 #bob { color: green; animation: modified 1s; } @keyframes modified { 50% { color: red; } }

 <div>I would like the green text below to turn red when it changes and then green again.</div> <div id="bob">azerty</div> <button onclick="myfunc();">click to modify</button>

Above is a mix of CSS animations with JS, you can also do it entirely in JavaScript by using the animate method .

Answer 3

Thanks to jeremy-denis's answer, I found out how to get the expected behaviour.

 function myfunc(){ let bob = document.getElementById("bob") bob.innerText += "azerty"; bob.classList.add('modified'); setTimeout(function() { bob.classList.remove('modified'); }, 1000); }

 #bob{ color: green; transition: all 1s; } #bob.modified{ color: red; }

 <div>I would like the green text below to turn red when it changes and then green again.</div> <div id="bob">azerty</div> <button onclick="myfunc();">click to modify</button>