Question

我正在尝试在外观出现之前即动态更改已经预定义的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);
    }

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

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

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

1 个答案: