How to reflow page when changing Frame border attribute with JavaScript

Question

I'm writing a TamperMonkey script to tweak the UI of a website I don't control, which uses frameset and frame elements for its primary layout.

I'm trying to increase the border attribute of of one of the framesets to make it easier to resize the frames (larger target for grabbing with the mouse). But even though my script sets the correct attribute to my desired value, the browser doesn't update the rendered frameset until it has to redraw it for some other reason, such as changing the browser window size. In my TamperMonkey script, how can I get the browser to immediately render the page after changing the frameset's border attribute?

Here's the code fragment which sets the border attribute value:

const borderWidth = document.querySelector('html > frameset > frameset')?.attributes?.border;

if (borderWidth) {
    borderWidth.value = 10;
}

This does exactly what it should. It successfully locates the correct frameset element and sets the border attribute to 10. (Confirmed by Inspecting with dev tools.) Running it in the console also works, immediately updating the frameset element's border attribute in the Element view.

I found a list of properties and methods which "should" trigger a reflow . I've tried accessing offsetWidth in both the frameset and both of its child frames via the console, and various other methods which are listed as triggering reflow, but so far none of them actually cause the changed border value to be applied.

Should I be configuring the border value some other way, rather than writing to the attribute in the DOM, in order to trigger the reflow "naturally"? Is there an API I can call to force re-rendering of the frameset border?

I'm using Chromium-based Edge, 105.0.1343.33.

Answer 1

I forced the reflow by updating my JavaScript to add an empty frame element to the frameset that I wanted to re-render, and then immediately removed the empty frame. This triggers the reflow that I needed.