динамически изменять стиль CSS модального диалога - PullRequest
Новая
       7

динамически изменять стиль CSS модального диалога

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

Я пытаюсь динамически изменить уже предопределенный стиль css для «modal-dialog» / «modal-dialog-content» до его появления, т.е. 

.modal-dialog-content {
width:100%;
height:100%;
overflow:visible; 
transform: scale(1);
}

Я пытался 

    document.getElementsByClassName('modal-dialog-content')[0].style.transform ='scale('+ 0.5 +')';
or    
    document.querySelector('.modal-dialog-content').style.transform='scale('+ 0.5 +')';

Однако при появлении у него все еще есть предопределенный «scale (1)»

Ниже данных инспектора FF фактических CSS и сценариев до и после выполнения сценария.Перед выполнением: 

   .vjs-modal-dialog .vjs-modal-dialog-content {
    width:100%;
    height:100%;
    overflow:visible; 
    transform: scale(1);
    }

После выполнения: 

 document.getElementsByClassName('vjs-modal-dialog-content')[0].style.transform ='scale('+ 0.5 +')';
 or    
 document.querySelector('.vjs-modal-dialog-content').style.transform='scale('+ 0.5 +')';

На табло данных инспектора FF отображается: 

   .vjs-modal-dialog .vjs-modal-dialog-content {
    width:100%;
    height:100%;
    overflow:visible; 
    transform: scale(1);
    }

1 Ответ

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

Проблема решена (вроде) с помощью цикла через массив: 

document.querySelectorAll('.vjs-modal-dialog-content');

и изменение стиля в каждом случае, например 

var elements = document.querySelectorAll('.vjs-modal-dialog-content');
    for(var i=0; i<elements.length; i++){
    elements[i].style.transform ='scale('+ 0.5 +')';}

, вероятно, не лучшее решение, однако ...

...