动态更改模态Dialog CSS样式

Question

我正在尝试更改"模态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 +')';

出现时，它仍然具有预定义的"比例（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 +')';}

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