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

【问题标题】：How to make style property names to lowercase如何将样式属性名称设为小写
【发布时间】：2021-09-25 19:53:09
【问题描述】：

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

 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 我应该使用什么函数/方法来检查案例？

【问题讨论】：

你用的是什么编辑器？
@TheFool CKEditor 5
你想禁用设置或做一些javascript操作？
好吧，他们没有为它提供任何设置，所以我正在尝试的是，如果某些网站具有带有样式的 HTML，但属性名称是大写的，所以我希望他们将其应用到编辑，但编辑认为它是别的东西所以我想要的是MARGIN -> margin。
@SDP 所以根据您的最新评论，您想将MARGIN 转换为margin？我以为你想检查它是否是大写的小写

标签： javascript html object javascript-objects value-of-css-property

【解决方案1】：

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

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）

【讨论】：

【解决方案2】：

如果你可以使用 ES6，那么你可以使用 Object.entries 创建一个新对象：

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

【讨论】：

我不认为这是他想要的，但我不确定

【解决方案3】：

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

首先可以先获取style属性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

【讨论】：