Skip to content

Instantly share code, notes, and snippets.

@rmdwirizki
Created February 9, 2018 00:00
Embed
What would you like to do?
Modify css pseudo element property using javascript.
var UID = {
_current: 0,
getNew: function(){ this._current++; return this._current; },
_props: {},
addProp: function(id, prop, value) {
this._props[id] = {
prop : prop,
value: value
};
},
isPropExist: function(prop, value) {
for (const id in this._props) {
if (this._props.hasOwnProperty(id)) {
const element = this._props[id];
if (element.prop == prop && element.value == value) {
return id;
}
}
}
return false;
}
};
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 regx = new RegExp('\\b' + 'pseudoStyle' + '.*?\\b', 'g');
_this.className = _this.className.replace(regx, '');
var currentID = UID.isPropExist(prop, value);
if (currentID != false) {
_this.className += ' ' + 'pseudoStyle' + currentID;
}
else {
var newID = UID.getNew();
UID.addProp(newID, prop, value);
_this.className += ' ' + 'pseudoStyle' + newID;
_sheet.innerHTML += ' .' + 'pseudoStyle' + newID + ':' + element + '{' + prop + ':' + value + '}';
_head.appendChild(_sheet);
}
return this;
};
// Example usage
// element.pseudoStyle('after', 'background-image',
// 'url("' + newImage + '") !important'
// );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment