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

首先，您在自己的问题中自相矛盾。您说正则表达式适用于所有样式名称，但是您只想更改特定的CSS属性。其次，我无法理解为什么您需要使用正则表达式来定位此属性。您可以使用CSS和JavaScript选择此属性，并将其更改为所需的任何值。

CSS：

div{ max-width: 20px; }

JS：

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

编辑：为了回应您的评论，我将看一下jQuery css（）方法。 https://www.w3schools.com/JQuery/jquery_css.asp 基本上，这使您可以设置任何CSS属性。

Answer 2

存在一个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>

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

2 个答案: