JSFiddle - React, Tailwind, and code Playground
HTML
<p class="element" style="margin: 10px">
Element
</p>
CSS
.element {
background: red;
margin: 20px;
}
JavaScript
var elm = document.getElementsByClassName("element");
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
var ret;
if(classes[x].cssText){
ret = classes[x].cssText;
} else {
ret = classes[x].style.cssText;
}
if(ret.indexOf(classes[x].selectorText) == -1){
ret = classes[x].selectorText + "{" + ret + "}";
}
return ret;
}
}
}
}
//from: https://stackoverflow.com/a/27527462/5814976
var cssElm = getStyle('.element'),
cssVal = cssElm.split('margin:')[1].split(';')[0],
inlineVal = elm[0].style.margin,
totalVal = parseInt(cssVal.replace(/[^0-9.]/g, "")) + parseInt(inlineVal.replace(/[^0-9.]/g, ""));
console.log(totalVal)
elm[0].style.margin = totalVal + 'px';