Modifying/adding/removing specific style (or class)

[thipages]

Hi, It could be interesting to be able to modifiy, add or remove a specific style or class At the moment we can only add or remove all css styles or class at once.

Example

HTML.element= {
   attrs : {
    style:"color.red; background-color:white;"
  },
  html:"aDiv"
}
HTML.element.attrs.style="color.black;"

This will remove background-color (which is ok) but what if we just want to change color without changing background-color

This may be managed within the UTILS function, rapid example for style

var UTILS = {
    style: function( HTML_key, style_key, style_value, add){
        var originalStyles, styleObject,styleArray, newStyle;
        originalStyles=HTML[HTML_key].attrs.style;
        if (originalStyles) {
            styleObject = {};
            styleArray = originalStyles.split(";")
                .map(function (item) {
                    return item.split(":")
                        .map(function (item) {
                            return item.trim();
                        });
                });
            styleArray.forEach(([key, value]) => styleObject[key] = value);
            if (styleObject.hasOwnProperty(style_key)) {
                if (add) {
                    styleObject[style_key] = style_value;
                } else {
                    delete styleObject[style_key];
                }
            } else {
                if (add) styleObject[style_key] = style_value;
            }
            newStyle=Object.entries(styleObject).map(function(item) {
                return item.join(":")
            }).join(";");
        } else {
            newStyle= add ? style_key+":"+style_value : "";
        }
        HTML[HTML_key].attrs.style= newStyle;
    }
}

UTILS.style("element","color","black",true);

What do you think.?

[thipages]

for class (css)

css: function (HTML_key,css,add) {
        var originalCss,cssArray;
        originalCss=HTML[HTML_key].attrs.class;
        if (originalCss) {
            while (originalCss.indexOf("  ") !== -1) {
                originalCss.replace(/  /g, '')
            }
            cssArray = originalCss.split(" ");
            if (cssArray.includes(css)) {
                if (!add) {
                    cssArray.filter(function (value) {
                        return value !== css;
                    });
                }
            } else {
                if (add) {
                    cssArray.push(css);
                }
            }
        } else {
            if (add) cssArray=[css];
        }
        HTML[HTML_key].attrs.class=cssArray.join(" ");
    }

[Gurigraphics]

Classes I think could be methods like Jquery:

DOM.class.add("element", "class" )
DOM.class.remove("element", "class" )
DOM.class.toogle("element", "classShow", "classHide" )

Style I never use. I always prefer to use classes. But I think it's one more resource. Same logic:

DOM.style.add("element", "color", "green" )
DOM.style.change("element", "color", "red" )
DOM.style.remove("element", "color" )

And with the syntax simplified

HTML[HTML_key].attrs.class
HTML[HTML_key].class 

[Gurigraphics]

Added the class methods. Styles has not yet. https://github.com/Gurigraphics/DOMinus.js/issues/6

[thipages]

Great! so quick

[thipages]

Note : styles can be useful at development stage before becoming css classes