Java脚本错误“无法读取null的属性'clientWidth'为空”

Question

我的Java脚本有此代码未回答的问题 。

可以在https://jsfiddle.net/p3kdbquh/2/中运行，但不能在本地运行

  $('#myModal').modal('show');

var particleCount = 300;
var particleMax   = 1000;
var sky           = document.querySelector('.modal');
var canvas        = document.createElement('canvas');
var ctx           = canvas.getContext('2d');
var width         = sky.clientWidth; //THIS LINE
var height        = sky.clientHeight;
var i             = 0;
var active        = false;
var snowflakes    = [];
var snowflake;
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var Snowflake = function () {
  this.x = 0;
  this.y = 0;
  this.vy = 0;
  this.vx = 0;
  this.r = 0;

  this.reset();
};

Snowflake.prototype.reset = function() {
  this.x = Math.random() * width;
  this.y = Math.random() * -height;
  this.vy = 1 + Math.random() * 3;
  this.vx = 0.5 - Math.random();
  this.r = 1 + Math.random() * 2;
  this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
  snowflakes = [];
  for (i = 0; i < particleMax; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }
}

generateSnowFlakes();

function update() {
  ctx.clearRect(0, 0, width, height);

  if (!active) {      
    return;
  }

  for (i = 0; i < particleCount; i++) {
    snowflake = snowflakes[i];
    snowflake.y += snowflake.vy;
    snowflake.x += snowflake.vx;

    ctx.globalAlpha = snowflake.o;
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();

    if (snowflake.y > height) {
      snowflake.reset();
    }
  }

  requestAnimFrame(update);
}

function onResize() {
  width = sky.clientWidth;
  height = sky.clientHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#FFF';

  var wasActive = active;
  active = width > 600;

  if (!wasActive && active) {
    requestAnimFrame(update);
  }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

onResize();
window.addEventListener('resize', onResize, false);

sky.appendChild(canvas);

var gui = new dat.GUI();
gui.add(window, 'particleCount').min(1).max(particleMax).step(1).name('Particles count').onFinishChange(function() {
  requestAnimFrame(update);
});

我已经阅读了有关此内容，并发现它与document.querySelector('.modal'); 该类已定义，但我的aspx代码具有相同的名称，因此它不应返回null。

这是客户端中正确定义了模式的代码

<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
<%--        <link rel="stylesheet" href="Content/bootstrap.min.css" />--%>
      <link rel="stylesheet" type="text/css" href="Style/Site.css" />
    <link rel="stylesheet" href="Style/animate.min.css" />



     <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
            <script src="Script/query.js"></script>

</head>
<body>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="top-image">
              <img src="https://tutsplus.github.io/merry-christmas-web-app-build/images/xmas-tree.png" alt="" />
            </div>
            <h1 class="modal-title">I wish you</h4>
          </div>
          <div class="modal-body">
            <p>Merry Christmas and Happy Holidays!</p>
            <hr />
            <p>Its time to say "<span>Thank You!</span>"</p>
          </div>
          <div class="modal-footer">
            <div class="img-footer">
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </body>

我从此页面获得了代码“ https://codepen.io/nunofidalgo/pen/zrYoVr ”

任何人都可以帮忙吗

我从consola得到错误

Answer 1

我没有那个错误

https://jsfiddle.net/p3kdbquh/

console.log(sky)

div class =“ modal fade” id =“ myModal” tabindex =“-1” role =“ dialog”

您能否通过重新编写该代码来制作自己的Codepen？ 如果document.querySelector(query)找不到任何元素，它将返回null因此我假设您的配置中有问题。 确保您的JS和HTML正确加载，并且您正确拼写了类名，等等。

我也觉得应该注意.modal()不是jQuery stdlib的一部分。 我相信.modal()是在bootstrap的JS中找到的

Answer 2

整个问题是我的脚本在HTML页面中的定位，我必须在关闭body标签之前将其定位，然后解决了该问题。 谢谢大家的帮助

Java脚本错误“无法读取null的属性'clientWidth'为空”

问题描述

2 个解决方案

解决方案1
0 2017-12-04 15:48:29

解决方案2
0 2017-12-05 12:32:35

Java脚本错误“无法读取null的属性&#39;clientWidth&#39;为空”

问题描述

2 个解决方案

解决方案1 0 2017-12-04 15:48:29

解决方案2 0 2017-12-05 12:32:35

Java脚本错误“无法读取null的属性'clientWidth'为空”

解决方案1
0 2017-12-04 15:48:29

解决方案2
0 2017-12-05 12:32:35