JSFiddle - React, Tailwind, and code Playground

by cherniv

HTML

<div id="base">base</div>
<div id="test" data-boxshadow="yellow 0px 0px 0px 15px,inherit,inherit">test</div>

CSS

div{
    box-shadow: 0 0 0 5px green,  0 0 0 10px #ff0000 ,  0 0 0 15px blue;    
    position: relative;
    height: 50px;
    width: 100px;
    margin: 50px;
}

JavaScript

function change () {
    var elem = document.getElementById("test");
    var style = window.getComputedStyle(elem);
    var boxShadow = style.boxShadow;
    var arrayBoxShadows = parseFirstComma (boxShadow);
    
    var newData = elem.dataset.boxshadow;
    var arrayNewData = parseFirstComma (newData);
    boxShadow = "";
    var nmax = Math.min (arrayBoxShadows.length, arrayNewData.length)
    for (var n = 0, lenR = nmax; n < lenR; n++) {
        if (n > 0) {
            boxShadow = boxShadow + ", ";
        }
        var pos = arrayNewData[n].indexOf("inherit"); 
        if (pos != -1) {
            boxShadow = boxShadow + arrayBoxShadows[n];
        } else {
            boxShadow = boxShadow + arrayNewData[n];
          
        }
    }
    if (arrayNewData.length > nmax) {
        for (var n = nmax, lenR = arrayNewData.length; n < lenR; n++) {
            if (n > 0) {
                boxShadow = boxShadow + ", ";
            }
            boxShadow = boxShadow + arrayNewData[n];
        }
    }
    if (arrayBoxShadows.length > nmax) {
        for (var n = nmax, lenR = arrayBoxShadows.length; n < lenR; n++) {
            if (n > 0) {
                boxShadow = boxShadow + ", ";
            }
            boxShadow = boxShadow + arrayBoxShadows[n];
        }
    }
        

    elem.style.boxShadow = boxShadow;
}


function parseFirstComma (property) {
    var properties = new Array();
    var curr = "";
    var chr;
    var nested = "";
    
    for (inx = 0, len = property.length; inx < len; inx++) {
        chr = property[inx];
        if (chr == "(") nested += 1;
        if (chr == ")") nested -= 1;
        if (nested == 0 && chr == ",") {
            properties.push (curr);
            curr = "";
        } else {
            curr = curr + chr;
        }
    }
    if (curr.length > 0) {
        properties.push (curr);
    }
    return properties;
};

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
       ...