How to get a DOM element's ::before content with JavaScript?

How to get a DOM element's ::before content with JavaScript? How to modify a DOM element's ::after style with JavaScript?

How to get a DOM element's ::before content with JavaScript?

​​https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript​​

​​getComputedStyle​​

​​https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle​​

---

How to modify a DOM element's ::after style with JavaScript?

​​https://stackoverflow.com/questions/56590524/how-to-modify-a-dom-elements-after-style-with-javascript​​

demo

solution

very simple, just need add new class, and overwrite the old one

let textareas = [...document.querySelectorAll(`[data-uid^="circle"]`)];
let btn = document.querySelector(`[data-uid="btn"]`);

btn.addEventListener(`click`, () => {
    textareas.forEach((textarea, i) => {
        textarea.setAttribute(`class`, `tips tips${i} rotate`);
    });
});

// let center = 2;
textareas.forEach((textarea, i) => {
    textarea.addEventListener(`click`, () => {
        for (const item of textareas) {
            item.classList.remove(`tips-highlight`);
        }
        textarea.classList.add(`tips-highlight`);
    });
});

.tips::after {
content: "";
position: absolute;
left: 50%;
top: -19%;
height: 30px;
width: 30px;
background-color: #00c991;
border-radius: 50% 50% 0;
transform: translate(-50%, -50%) rotate(45deg);
}

.tips-highlight::after {
background-color: #f82eb5;
}

refs

​​https://stackoverflow.com/a/14106897/5934465​​

​​https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript​​

js

​​https://stackoverflow.com/questions/7330355/javascript-set-css-after-styles/7330454#7330454​​

js

jquery ???

$("#foo li:after").css("left","100px");

pseudoStyle lib

​​http://mcgivery.com/htmlelement-pseudostyle-settingmodifying-before-and-after-in-javascript/​​

var UID = {
  _current: 0,
  getNew: function(){
    this._current++;
    return this._current;
  }
};

HTMLElement.prototype.pseudoStyle = function(element,prop,value){
  var _this = this;
  var _sheetId = "pseudoStyles";
  var _head = document.head || document.getElementsByTagName('head')[0];
  var _sheet = document.getElementById(_sheetId) || document.createElement('style');
  _sheet.id = _sheetId;
  var className = "pseudoStyle" + UID.getNew();

  _this.className +=  " "+className; 

  _sheet.innerHTML += " ."+className+":"+element+"{"+prop+":"+value+"}";
  _head.appendChild(_sheet);
  return this;
};

not exist

three = document.querySelector(`[data-uid="circle3"]`);
three.pseudoStyle("after", "color", "purple");

OK