How to make style property names to lowercase

so i have a object list for styles like this,

 const styles = {
            'font': 'font',
            'fontSize': 'font-size',
            'fontFamily': 'font-family',
            'fontVariant': 'font-variant',
            'fontWeight': 'font-weight',
            'fontStyle': 'font-style',
            'margin': 'margin',
        };

<div style='MARGIN:10px; FLOAT:left'></div>

FYI-i'm using an editor so that when i paste the HTML code, sometimes it has those property names in UPPERCASE .

how to do i make sure that all the property names are lowercase what function/method should i use to check the case?

I think you need to combine what has been said already.

document.querySelectorAll('p').forEach(p => {
  p.setAttribute('style', p.getAttribute('style').toLowerCase())
  console.log(p)
})

<p style="COLOR: red;">Foo</p>
<p style="COLOR: blue;">Bar</p>
<p style="COLOR: green;">Baz</p>

That said, I wouldn't do it at runtime. Maybe do it once and serve the transformed HTML directly to the user. Maybe even some automated setup with gulp or 11ty.

The style are also visible without transforming. (for me in chrome)