无法获取未定义或空引用的属性“样式” [英] Unable to get property 'style' of undefined or null reference
本文介绍了无法获取未定义或空引用的属性“样式”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在运行我的应用时出现以下错误：
Hi, I'm getting the following error on running my app:
{"exception":null,"error":[{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n at executeElementAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6652:13)\n at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n at executeAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6815:13)\n at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1473:9)\n at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"},{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n at executeElementTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6575:13)\n at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n at executeTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6837:13)\n at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1484:9)\n at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"}],"promise":{"_oncancel":null,"_nextState":null,"_state":{"name":"error","done":null,"then":null},"_value":[{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n at executeElementAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6652:13)\n at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n at executeAnimation (ms-appx://microsoft.winjs.1.0/js/base.js:6815:13)\n at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1473:9)\n at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"},{"description":"Unable to get property 'style' of undefined or null reference","number":-2146823281,"stack":"TypeError: Unable to get property 'style' of undefined or null reference\n at executeElementTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6575:13)\n at applyAction (ms-appx://microsoft.winjs.1.0/js/base.js:6754:25)\n at executeTransition (ms-appx://microsoft.winjs.1.0/js/base.js:6837:13)\n at enterPage (ms-appx://microsoft.winjs.1.0/js/ui.js:1484:9)\n at navigated (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:114:21)\n at parentElement (ms-appx://fa541b49-1aef-4f6c-9002-7d2e2fcadc25/js/navigator.js:94:29)\n at notifySuccess (ms-appx://microsoft.winjs.1.0/js/base.js:1404:21)\n at enter (ms-appx://microsoft.winjs.1.0/js/base.js:1091:21)\n at _run (ms-appx://microsoft.winjs.1.0/js/base.js:1307:17)\n at _completed (ms-appx://microsoft.winjs.1.0/js/base.js:1275:13)"}],"_isException":false,"_errorId":4},"id":4}我的javascript文件是这样的：
My javascript file is as of such:
(function () {
"use strict";
var ui = WinJS.UI;
var utils = WinJS.Utilities;
ui.Pages.define("/pages/itemDetail/itemDetail.html", {
// Template tutorial code
getAnimationElements: function () {
return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
},
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
//element.querySelector("article .item-title").textContent = item.title;
//element.querySelector("article .item-subtitle").textContent = item.subtitle;
//element.querySelector("article .item-image").src = item.backgroundImage;
//element.querySelector("article .item-image").alt = item.subtitle;
//element.querySelector("article .item-content").innerHTML = item.content;
//element.querySelector(".detailfontstyle").textContent = item.mIOs.PrimaryObjective;
// Template tutorial code
appbar.winControl.disabled = false;
appbar.winControl.hideCommands([labelSize, markItem]);
appbar.winControl.showCommands([textSize]);
},
// Template tutorial code
setPageFocus: function () {
this.element.querySelector(".content").focus();
},
});
})();
和html文件是：
<html>
<head>
<meta charset="utf-8" />
<title>itemDetailPage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/MarketIODetails/marketingIODetails.css" rel="stylesheet" />
<link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/itemDetail/itemDetail.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="itemdetailpage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
</h1>
</header>
<div class="details">
<h1 style="font-family:'segoe ui'; color:orange;text-align:center; margin-bottom:20px">Details</h1>
<!--<h2 class="detailfontstyle">Primary obj: Put primary obj here</h2>-->
<!--<h2 class="detailfontstyle org">Org: Put organisation here</h2>
<h2 class="detailfontstyle sap">SAP IO: Put SAP IO here</h2>
<h2 class="detailfontstyle editor1">Editor 1: Put editor name here</h2>
<h2 class="detailfontstyle edito2">Editor 2: Put editor name here</h2>-->
</div>
<div class="tablecontainer">
<div class="tableoutlay">
<h1 style="font-family:'segoe ui'; color:orange; text-align:center">Budget Table</h1>
<table class="forecastTable">
<thead>
<tr style="height: 5px">
<th></th>
<th>Available</th>
<th>Assigned</th>
<th>Unassigned</th>
<th>Approved</th>
</tr>
</thead>
<tbody>
<tr>
<th>Vendor</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
</tr>
<tr>
<th>RevAdjust</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
</tr>
<tr>
<th>Market</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
</tr>
</tbody>
</table>
</div>
<div class="tableoutlay" style="margin-top:43px">
<h1 style="font-family: 'segoe ui'; color: orange; text-align:center">Forecast Table</h1>
<table class="forecastTable">
<thead>
<tr style="height: 5px">
<th></th>
<th>July</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nove</th>
<th>Dec</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th>Vendor</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>1289</td>
</tr>
<tr>
<th>Budget</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>1289</td>
</tr>
<tr>
<th>Market</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>1289</td>
</tr>
<tr>
<th>Some</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>1289</td>
</tr>
<tr>
<th>Some</th>
<td>1231</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>7292</td>
<td>9821</td>
<td>4325</td>
<td>1278</td>
<td>1289</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
感谢任何帮助。
推荐答案
您可以在动画功能中设置断点（在您发布的错误中）。 我的猜测是你试图动画不在页面中的东西：
You can set a breakpoint in the animate function (in the error you posted). My guess is that you are trying to animate something that is not in your page:
//模板教程代码
getAnimationElements ：
功能 （） {
返回
[[ 此 。 元素 <跨度> <跨度> querySelector <跨度>（ <跨度>"报头QUOT; <跨度>）]，
[ 此 。 元素 。 querySelector （ " .content" ）]];
}，
// Template tutorial code
getAnimationElements:
function () {
return
[[this.element.querySelector("header")],
[this.element.querySelector(".content")]];
},
为什么要添加.content？ 我在你的代码中没有看到它！
Why did you add .content? I don't see it anywhere in your code!
这篇关于无法获取未定义或空引用的属性“样式”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
