javascript 通过JS更改伪元素CSS

Posted 2021-05-03

// Start: Change pseudo element stlying
    // Element must already have stlying to be able to change it
    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 + " !important}";
    	_head.appendChild(_sheet);
    	return this;
    };
// End: Change pseudo element stlying

// Usage
const element = document.getElementById(id);
element.pseudoStyle('before', 'height', '10px');