Как применять правила .css к динамическим HTML-элементам, сгенерированным в JavaScript - PullRequest
Новая
       15

Как применять правила .css к динамическим HTML-элементам, сгенерированным в JavaScript

0 голосов
/ 21 сентября 2019

Я прочитал похожие вопросы и попробовал несколько предложений, но ничего не помогло - надеюсь, вы поможете

Сценарий:

  • загрузка моего сайта с начальным (статическим) index.html -- отлично выглядит css занимает отлично
  • нажатие на кнопку «следующая страница» -> успешно извлекает данные из БД и динамически генерирует раздел innerHTML элемента.

Проблема: аудиопроигрыватель является единственным элементом, который не выглядит одинаково

Исходное состояние: при первой загрузке сайта enter image description here

и как это выглядит после генерации HTML enter image description here

Все остальные теги, такие как изображение заголовка и текст, применяют правила CSS.Аудиоплеер имеет правила в файле css, а также имеет следующий скрипт в конце index.html, и я подозреваю, что корень моей проблемы не в том, что я снова "вызван / вызван" для новых сгенерированных элементов 

<script>
        document.addEventListener('DOMContentLoaded', function() {
                    var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;

                    for (var i = 0; i < total; i++) {
                        new MediaElementPlayer(mediaElements[i], {
                            pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                            shimScriptAccess: 'always',
                            success: function () {
                                var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
                                for (var j = 0; j < targetTotal; j++) {
                                    target[j].style.visibility = 'visible';
                                }
                      }
                    });
                    }
                });
    </script>

Если по этой причине я могу вызвать это событие по требованию и как это сделать из файла javascript?

...