css - 动态更改模态对话框 css 样式

Question

我试图在它出现之前动态地改变已经预定义的“modal-dialog”/“modal-dialog-content”的CSS样式，即

.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 inspector 的实际 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);
    }

Answer 1

通过数组循环解决(某种程度上)问题:

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 +')';}

可能不是最好的解决方案，但是...