Javascript jQuery和getElementById无法访问加载的DOM元素（div）

jQuery命令和getElementById似乎都无法获取我的DOM项

我的部分脚本如下所示：

var box_size = $("#testbox").height();      
var c = document.getElementById("s1"); 
console.log(c);  // returns null
console.log(box_size); // returns null
console.log($(window).height()); // returns the correct number

c.width = box_size + $(window).height(); // cannot set width of null

我的DOM树的摘录基本上如下所示

<div class="wrap" id="mainwrap">
  <div class="row relef">
    <div class="box relef" id="testbox"><canvas id="s1"></canvas></div>
    <div class="box relef"><canvas id="s2"></canvas></div>
    <div class="box relef"><canvas id="s3"></canvas></div>
  </div>
</div>

我认为应该在执行JS时加载DOM树。元素是使用.hide隐藏的，但我从未从DOM树或类似的树中删除它们。当我将框的背景设置为红色时，框的宽度和高度可以通过图形显示。尺寸约为80 x 80 px。我通过W3CSchools检查了我的HTML代码，没有错误

你知道错误是怎么发生的吗

TypeError: null is not an object (evaluating 'c.width = box_size + $(window).height() * 0.04')

编辑：

console.log(document.readyState); // returns "complete" 

---

我在声明box_size之前直接使用了它，只是将您的代码复制到了JSFIDLE中，它可以工作！将整个js包装在$document中。准备好确保dom已加载！JSFIDLE会自动执行此操作，这就是为什么不需要它的原因。您何时使用此代码？是在文档确实加载之后吗？就像在一个onload函数中，当您调用JS时，元素是存在的？发生这种情况的唯一两种方式是，如果您在加载DOM后实际上没有执行代码，或者HTML与代码不在同一页上。@errad OP应该使用$function{}；

console.log(document.readyState); // returns "complete"