CODEWITHSUNDEEP
javascripthtmlobjectjavascript-objectsvalue-of-css-property
user13424765
user13424765

Reputation:

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?

Upvotes: 0

Views: 377

Answers (3)

The Fool
The Fool

Reputation: 20467

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)

Upvotes: 1

I_love_vegetables
I_love_vegetables

Reputation: 1341

If im not wrong, you wanted to check if the properties of the style attribute are UPPERCASED or lowercased

First of all, you can first get the value of the style attibute like

const value = document.querySelector("div").getAttribute("style");
//this will return 'MARGIN:10px; FLOAT:left'

then you can simply turn them to lowercase with toLowerCase

const lowercased = value.toLowerCase();

and then you can check if the properties with something like

return value === lowercased

<div style='margin:10px; float:left'></div> returns true
<div style='MARGIN:10px; FLOAT:left'></div> returns false

Upvotes: 0

Kevin
Kevin

Reputation: 1367

If you can use ES6, then you could create a new object using Object.entries:

const lowerCaseStyles = Object.entries(styles).map(([key, value]) => ({ [key.toLowerCase()]: value}));

Upvotes: 1

Related Questions