Javascript 未捕获的TypeError:无法读取null/Oracle JET的属性“style”

您好，我是JS和Oracle JET框架的初学者

我试图在我的项目中实现一个面板展开/折叠项，我有一个错误，我不知道为什么我遵循了食谱。这是我的密码：

我的HTML：

---

感谢您的帮助

这是因为涉及以下行时，HTML尚未加载：

var panel = document.getElementById('panel');
var extra = document.getElementById('extra-content');  
var initHeight = $(panel).css('height');

因此它们的值变为空

相反，您只能在使用jQuery加载文档后调用它们，如下所示：

var panel;
var extra;
var initHeight;

$(document).ready(function(){
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
});

或者，如果您想采用纯OJET方式，您可以这样做：

var panel;
var extra;
var initHeight;

self.handleBindingsApplied = function(){ 
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
};

self.HandleBindingApplied是OJET Viewmodel的内部方法，在HTML和Viewmodel之间的绑定完成后自动调用该方法

您可以阅读有关所有内部方法的更多信息

另外，别忘了应用食谱中的CSS

var panel;
var extra;
var initHeight;

$(document).ready(function(){
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
});

var panel;
var extra;
var initHeight;

self.handleBindingsApplied = function(){ 
    panel = document.getElementById('panel');
    extra = document.getElementById('extra-content');
    initHeight = $(panel).css('height');
};