动态改变模态对话框css样式

Question

我试图在它出现之前动态地改变已经预定义的“模态对话框”/“模态对话框内容”的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执行器之前和之后的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);
    }

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

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