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

Question

I have inline style css string and I want replace only one style name. I would like make universal regex for all style names. REGEX:

/([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>

Result (I want replace max-width:257px; to max-width:20px; ):

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

The problem is that all style names is replaced to 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

First of all, you contradict yourself in your question. You say that the regex is for all style names but you only want to change a specific CSS property. Secondly, I can't possibly fathom why you need a regular expression to target this property. You can select this property using CSS and JavaScript and change it to whatever value you want.

CSS:

div{ max-width: 20px; }

JS:

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

EDIT: IN response to your comment, I would take a look at the jQuery css() method. https://www.w3schools.com/JQuery/jquery_css.asp This basically allows you to set any css property.

Answer 2

There exists a cssText API , with which one can set several CSS properties in one go. Its downside is that it replace all the existing styles.

So by create a tiny "custom" setCSSText function, you can do the same, though with the existing kept untouched.

Stack snippet

 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>