javascript to get latest attribute value

Question

Summary: I am would like to get the final value of an attribute of a HTML style tag via javascript. I have written a css style sheet for a web page. I changed the value for a variable attribute. I want to read this value in javascript. I am getting the value as seen in the html not the value I changed it to via css.

Problem: This javascript returns 200px from the html when I want it to return the overwritten value of 400px.

saveEdit.style.getPropertyValue('--editor-height');

Details: my html

"(1) 200px". The original html.

<div class="editor ql-container" 
  data-action="editor" 
  aria-label="Content editor" 
  style="--editor-height:200px; --editor-height-small-viewport:200px;">

"css modification" points to my css code. I'm using stylus to inject the code.

"overridden" shows the result of the cascade.

excerpt of my css file

/* This gives a larger editor window. [ Apple size is 200px ] */
.ql-container {
   --editor-height:400px !important;;
}

This works the edit window appears at 400px.

Here is my javascript that reads the value of --editor-height. I'm using greasemonkey to inject the code.

   var saveEdit = document.querySelector('div.editor.ql-container');
   if (debug>=2) console.log ("saveEdit is ",saveEdit);
   if (saveEdit) {
     let allStyle = saveEdit.getAttribute("style")
     if (debug>=2) {
       console.log("style is ",saveEdit.getAttribute("style"));
       console.log("allStyle is ", allStyle)
       console.log("saveEdit.attributes are ",saveEdit.attributes);
     }
     editorHeight=saveEdit.style.getPropertyValue('--editor-height'); 
     console.log("editorHeight is ",editorHeight)

Here is what I see on the console for this section of code.

saveEdit is  <div class="editor ql-container" 
       data-action="editor" 
       aria-label="Content editor" 
       style="--editor-height:200px; --editor-height-small-viewport:200px;">
                       hu.user.js:364:18
style is  --editor-height:200px; --editor-height-small-viewport:200px; 
                       hu.user.js:368:8
allStyle is  --editor-height:200px; --editor-height-small-viewport:200px; 
                       hu.user.js:369:8
saveEdit.attributes are  NamedNodeMap [ class="editor ql-container",
       data-action="editor", 
       aria-label="Content editor", 
       style="--editor-height:200px; --editor-height-small-viewport:200px;" ]  
                       hu.user.js:373:8
editorHeight is  200px

actual web page: https://discussions.apple.com/thread/250147075 You need to have an account. Click on reply. I'm running macOS yosemite with Waterfox 56.2.7. Greasemonkey 3.17 Stylus 1.5.2