【问题标题】：Uncaught TypeError: Cannot read property 'style' of null / Oracle JET未捕获的类型错误：无法读取 null / Oracle JET 的属性“样式”
【发布时间】：2018-05-24 13:22:44
【问题描述】：

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

我正在尝试在我的项目 (http://www.oracle.com/webfolder/technetwork/jet-310/jetCookbook.html?component=animation&demo=panelExpand) 中实现面板展开/折叠项，但我遇到了这个错误，我不知道我为什么要遵循说明书。这是我的代码：

我的 HTML：

<div id="animationDemo">

    <div id="panel" class="oj-panel oj-margin basepanel">
      <h3>Panel Expand/Collapse Demo</h3>
      <div>Primary Content</div>
      <div id="extra-content" class="oj-panel oj-panel-alt2 childpanel">Extra Content</div>
      <button class="oj-panel-resize-button" 
              data-bind="click: buttonClick,
                         ojComponent: {component: 'ojButton', 
                                       chroming: 'half',
                                       display: 'icons', 
                                       icons: buttonIcons, 
                                       label: buttonLabel}"></button>
   </div>

</div>

我的 JS

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise', 'ojs/ojtable', 'ojs/ojarraytabledatasource', 'ojs/ojbutton', 'ojs/ojanimation'], 函数（oj，ko，$）{

function CustomerViewModel() {
  var self = this;

  ////

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

  // Keep track of whether the element is expanded
  self.expanded = false;
  self.buttonIcons = ko.observable({end:'oj-panel-expand-icon'});
  self.buttonLabel = ko.observable('expand');

  self.buttonClick = function() {
    if (self.expanded) {
      // Call the collapse method, then hide the extra content when animation ends.
      oj.AnimationUtils['collapse'](panel, {'endMaxHeight': initHeight}).then(function() {
        extra.style.display = 'none';
        self.expanded = false;
        self.buttonIcons({end:'oj-panel-expand-icon'});
        self.buttonLabel('expand');
      });
    } else {
      // Mark the extra content to be displayed, followed by a call to the expand method.
      extra.style.display = 'block';
      oj.AnimationUtils['expand'](panel, {'startMaxHeight': initHeight}).then(function() {
        self.expanded = true;
        self.buttonIcons({end:'oj-panel-collapse-icon'});
        self.buttonLabel('collapse');
      });
    }
  };
  ///


  self.connected = function() {
    // Implement if needed
  };

  self.disconnected = function() {
    // Implement if needed
  };

  self.transitionCompleted = function() {
  };

  self.hello2 = function() {
    alert('hhhh');
  };
}


return new CustomerViewModel();
 }
);

感谢您的帮助

【问题讨论】：

标签： javascript oracle-jet

【解决方案1】：

这是因为当涉及到这些行时，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.handleBindingsApplied 是 OJET Viewmodel 的内部方法，在 HTML 和 Viewmodel 之间的绑定完成后会自动调用。

你可以阅读更多关于所有内部方法here。

附：不要忘记应用食谱中的 CSS。

【讨论】：