Looking at the HTML below:
<h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4>
I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this with the JS code provided, but the css function call is producing an error (I prefer not to insert style=""; directly in the HTML as per client's request):
var H4obj = {},
$thisH4;
function css(el, styles) {
console.log(styles);
for (var property in styles)
el.style[property] = styles[property];
}
$('h4').each(function(index, el) {
$thisH4 = $(this);
var el = $thisH4;
data = $thisH4.data();
$.each(data, function(key, val){
H4obj['data-' + key] = val;
});
$.each(H4obj, function(index, value){
css($thisH4, {index:value});
});
});
Could there be a simpler approach to achieve this? Your assistance would be greatly appreciated.