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

JavaScript
,
1

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;">

2

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
3

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