How to get a DOM element's ::before content 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

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---