JavaScript, чтобы получить последнее значение атрибута - PullRequest
Новая
       8

JavaScript, чтобы получить последнее значение атрибута

0 голосов
/ 11 февраля 2019

Резюме: я хотел бы получить окончательное значение атрибута тега стиля HTML через javascript.Я написал таблицу стилей CSS для веб-страницы.Я изменил значение для атрибута переменной.Я хочу прочитать это значение в JavaScript.Я получаю значение, как видно в html, а не значение, на которое я его изменил, через css.

Проблема: этот javascript возвращает 200px из html, когда я хочу вернуть перезаписанное значение 400px.

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

Подробности: мой HTML

enter image description here

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

Это работает, окно редактирования отображается с размером 400px.

Вот мой 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 Вы должны иметь учетную запись.Нажмите на ответ.Я использую MacOS Yosemite с Waterfox 56.2.7.Greasemonkey 3.17 Stylus 1.5.2

...