如何改变Stats.js的大小？

Question

我正在尝试更改Stats.js画布的大小。我尝试使用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

试试这个

 thisParent.firstChild.width =100;
 thisParent.firstChild.height=100;

代替

thisParent.child.style.height=100

在我的情况下预期的HTML

 <div id="modal_4-content"><canvas></canvas>
 </div>

父母和孩子之间没有空间

  <div id="modal_4-content"><canvas></canvas> 
           //canvas is the first element  here try Ur update 1,2,3
          //If not go with queryselector
   </div>

Queryselector

  var canvas = thisParent.querySelector('canvas');
  canvas.width = 500;
  canvas.height = 500;

要绘制画布样式不同，不会影响调整大小画布。您需要直接内联属性来调整大小的宽度和高度。

Answer 2

我认为你可以使用.childnodes获得所有子节点

Answer 3

这解决了这个问题：

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";
        //...
    }
}