如何将样式属性名称设为小写

Question

所以我有一个像这样的样式的对象列表，

 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-我正在使用编辑器，因此当我粘贴 HTML 代码时，有时它会在 UPPERCASE 中包含那些属性名称。

如何确保所有属性名称都是 lowercase 我应该使用什么 function/method 来检查大小写？

Answer 1

如果你可以使用 ES6，那么你可以使用 Object.entries:

创建一个新对象

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

Answer 2

如果我没记错的话，你想检查样式属性的属性是大写还是小写

首先可以先获取like样式属性的值

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

然后您可以使用 toLowerCase

将它们简单地转换为小写

const lowercased = value.toLowerCase();

然后你可以检查属性是否像

return value === lowercased

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

Answer 3

我认为你需要结合已经说过的内容。

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>

也就是说，我不会在运行时这样做。也许做一次并将转换后的 HTML 直接提供给用户。甚至可以使用 gulp 或 11ty.

进行一些自动设置

样式不变换也可见。（对我来说 chrome）

如何将样式属性名称设为小写

How to make style property names to lowercase

html

javascript

object

javascript-objects

value-of-css-property

如何将样式 属性 名称设为小写

How to make style property names to lowercase

html

javascript

object

javascript-objects

value-of-css-property

如何将样式属性名称设为小写