How to check if "style" contains certain attribute and value and change it?

Assume the following simplified HTML code:

....
<div class="......" style="min-height: 200px;">
...
</div>
....

I would like to check from user script if a web page contains an element with a “style” attribute which in turn contains a value assignment like

min-height: 200px;

If there is one then it should be change to another value e.g.

<div class="......" style="min-height: 10px;">....</div>

Keep in mind the value (here: 200px) must be exactly matched.

How can I achieve this (With jQuery if possible)?

How can I check if “min-height: 10px;” is the only assignment in “style” and a second does NOT exist like in

<div class="......" style="width:1024px; min-height: 200px;">

This will produce a collection of elements that have min-height equal to 200px:

const elements = document.querySelectorAll('[min-height="200px"]');

You can look at the length of the collection to find how many elements have that attribute.

1 Like

This is probably of no use but assuming that the html is consistently formed then there is something you can do in css only (although a little limited).

I think its probably too fragile to use unless the html is consistently formatted as white space matters in attribute selectors

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.