javascript - css style 替换内联一个样式名称

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>