javascript - javascript获取最新的属性值

Question

摘要：我想通过javascript获取HTML样式标签的属性的最终值。我已经为网页编写了一个 CSS 样式表。我更改了变量属性的值。我想在 javascript 中读取这个值。我得到的是在 html 中看到的值，而不是我通过 css 将其更改为的值。

问题：当我希望它返回 400px 的覆盖值时，这个 javascript 从 html 返回 200px。

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

详细信息：我的html

“(1) 200 像素”。原始的html。

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

“css修改”指向我的css代码。我正在使用手写笔注入代码。

“覆盖”显示了级联的结果。

我的css文件的摘录

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

这工作编辑窗口出现在 400 像素。

这是我的 javascript，它读取 --editor-height 的值。我正在使用greasemonkey 注入代码。

   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)

这是我在控制台上看到的这部分代码的内容。

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

实际网页：https ://discussions.apple.com/thread/250147075 您需要有一个帐户。点击回复。我正在使用 Waterfox 56.2.7 运行 macOS 优胜美地。Greasemonkey 3.17 触控笔 1.5.2

标签： javascripthtmlcssvariablesgreasemonkey