javascript - 如何更改 Stats.js 大小？

Question

我正在尝试更改 Stats.js Canvas 的大小。我尝试使用 CSS，但我无法在那个特定的 canvas 元素上分配一个 id，所以尝试了这个:

HTML:

<div class="modal_container" id="modal_graph">        
   <img id="moveModalImage" src="images/moveIcon.png" alt="Move modal window."/>
   <span onclick='document.getElementById( "modal_graph" ).style.display= "none";' class="close-button">×</span>
   <p>Performance over Time Graph</p>
   <hr>

   <div id="modal_4-content">
     <!-- Add Stats.GUI here -->

   </div>

</div>

CSS:

#modal_4-content canvas{
    width: 240px; //Doesn't work
    height: 150px; //Doesn't work
    float: left; //Works fine
    padding-right: 60px; //Works fine
}

JS:

function createStatsGUI(){

    var thisParent = document.getElementById("modal_4-content");

    //Create new Graph (FPS, MS, MB)
    stats1 = new Stats();

    //Display different panel
    stats1.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
    stats1.domElement.style.width = '200px';
    stats1.domElement.style.height = '200px';

    //Add Stats to Document - modal 4
    thisParent.appendChild( stats1.domElement );  
}

如果您知道如何更改此设置，请告诉我。感谢您的宝贵时间。

Answer 1

这解决了问题:

function createStatsGUI(){

    //Create new Graphs (FPS, MS, MB)
    statsGUI = new Stats();
    statsGUI.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom

    var thisParent = document.getElementById("modal_4-content");
    thisParent.appendChild( statsGUI.domElement );

    var statsALL = document.getElementById("modal_4-content").querySelectorAll("canvas");

    for(var i=0; i<statsALL.length; i++){
        statsALL[i].style.width = "100%";
        statsALL[i].style.height = "160px";
        //...
    }
}