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

问题描述

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

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

解决方法

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

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）

,

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

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

,

如果没记错的话，你想检查一下style属性的属性是大写还是小写

首先可以先获取style属性的值，如

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