Is there a pseudo-class selector for javascript modified nodes?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>