css style Replace inline one style name

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;):

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>


The problem is that all style names is replaced to max-width:

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

2 Answers
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.

setCSSText

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>

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.

color:red;

min-height:30px

padding: 100px; border: 1px solid black;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.