css样式替换内联一个样式名称

Question

我有内联样式的css字符串，我只想替换一个样式名称。我想为所有样式名称创建通用正则表达式。正则表达式：

/([a-z-]+):s*([a-z0-9]+);/mg

HTML:

<div style="top: auto; max-width:257px; left: 155px; right: auto; bottom: 88px; max-height: 313px; display: block;"></div>

结果(我想将max-width:257px;替换为max-width:20px;(：

<div style="top: auto; max-width:20px; left: 155px; right: auto; bottom: 88px; max-height: 313px; display: block;"></div>

问题是所有样式名称都被替换为max-width:

<div style="max-width:20px; max-width:20px; max-width:20px; max-width:20px; max-width:20px; max-width:20px; max-width:20px;"></div>

https://regex101.com/r/5aHHZd/2

Answer 1

有一个cssText API，可以一次设置多个CSS属性。它的缺点是它取代了所有现有的样式。

因此，通过创建一个微小的"自定义"setCSSText函数，您可以做同样的事情，尽管现有的函数保持不变。

堆栈片段

var div = document.querySelector('div');
setCSSText(div,"maxWidth:20px;color:red")
function setCSSText(el,ss) {
ss.split(';').forEach(function(s){
var pv = s.split(':');
if (pv.length > 1) {
el.style[pv[0].trim()] = pv[1].trim();
}
})
}

<div style="top: auto; max-width:257px; left: 155px; right: auto; bottom: 88px; max-height: 313px; display: block;">Some dummy text</div>

Answer 2

首先，你的问题自相矛盾。您说regex适用于所有样式名称，但您只想更改特定的CSS属性。其次，我不可能理解为什么需要一个正则表达式来针对这个属性。您可以使用CSS和JavaScript选择此属性，并将其更改为您想要的任何值。

CSS：

div{ max-width: 20px; }

JS:

document.getElementsByTagName("div")[0].style.maxWidth = "20px";

编辑：作为对您评论的回应，我来看看jQuerycss((方法。https://www.w3schools.com/JQuery/jquery_css.asp这基本上允许您设置任何css属性。