Uncaught TypeError: Cannot read property 'offsetTop' of null

2023-10-27

在获取内容区块高度(无滚动)时使用offsetTop报如下错误:

Uncaught TypeError: Cannot read property ‘offsetTop’ of null

实现效果如图:

这里写图片描述

主要js代码

// 内容可视区域的高度
clientHeight = document.documentElement.clientHeight;

// 减去头部和底部的高度及上下外边距
colHeight = clientHeight - 60 - document.getElementById("cover-page").offsetTop;

// 界面的内容区高度
document.getElementById("cover-page").style.height = colHeight + "px";

修改后代码

// 内容可视区域的高度 
clientHeight = document.documentElement.clientHeight; 

// 减去头部和底部的高度及上下外边距,设置高度
cover_page = document.getElementById("cover-page");

cover_page.style.height = (clientHeight - cover_page.offsetTop - 60) + "px";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Uncaught TypeError: Cannot read property 'offsetTop' of null 的相关文章

  • 从 HTML 字符串中解析和选择

    使用 ajax 调用 我返回了页面的partialView HTML 但在显示它之前 我希望从主 div 中提取信息 如果我创建一个浮动窗口 该数据只是大小信息 Code div class window details more data
  • 检测单选按钮/复选框状态的变化

    我需要可靠地检测页面上单选按钮 复选框的状态变化 以便查看表单是否被修改 现在 这是一个完全独立的脚本 我无法修改任何控制表单的内容 目前 我只能看到两种方法 onchange事件处理程序 有助于处理文本框 文本区域和选择 但不会针对复选框
  • 在 Node.js 中生成带条形码的 pdf

    我在用https github com devongovett pdfkit https github com devongovett pdfkit生成 PDF 文件 我可以简单地使用类似的方法 app get get pdf req re
  • 在有限的上下文中运行 JS 代码

    我正在尝试奔跑trusted 隔离 上下文中的 JS 代码 基本上想出了这个方法 function limitedEval src context return function with this return eval src call
  • jQuery:查找具有特定自定义属性的元素

    我只想找到具有特定自定义属性值的元素 例如 我想找一个div其具有属性data divNumber 6 var number 6 var myDiv data divNumber number 我尝试使用http api jquery co
  • 更新存储在 chrome 扩展本地存储中的对象

    我正在开发一个 chrome 扩展 我将存储服务器发送的对象 例如 我将收到 命令 id 1 类型 A 大小 B 优先级 C 如果我有一个数据库 我会将其作为表中的一行插入commands 使用 chrome storage 我将这些对象的
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • 通过 JavaScript 单击按钮/页面提交

    我想了解 asp net 框架如何知道何时单击了按钮 因此一旦收到请求 就会在服务器上触发其单击事件 我需要了解它是如何工作的 因为我想从 JavaScript 触发按钮的服务器单击事件 我能够从 JavaScript 执行页面提交 doc
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • 在反应中访问回调内的 event.target

    我有以下课程片段 constructor props super props this timeout null search e gt clearTimeout this timeout this timeout setTimeout f
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • 如何跨多个文件跨越 javascript 命名空间?

    我永远忽略了javascript 几年前我开始使用 jQuery 这样我就可以过得去 但随着我开始更多地进行 TDD 我昨天决定真正深入研究 javascript 之后可能还有咖啡脚本 在我的 ASP NET Web 窗体应用程序中 我有很
  • jQuery Mobile + Admob:轮换?

    我使用 jQuery Mobile 框架创建了一个移动应用程序 所有页面都在index php中加载 使用 div 在每个页面的页脚中 我添加了Admob代码 div div div
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐

  • 【mmdetection】工具tools试用

    1 日志分析 analyze logs py https blog csdn net jy1023408440 article details 105701705 2 可视化数据集 browse dataset py python tool
  • JAVA上机题(3道)

    题目一 从控制台中读入一个文件名 判断该文件是否存在你的某个盘下 如果该文件存在 则在原文件相同路径下创建一个文件名为 copy 原文件名 的新文件 该文件内容为原文件的拷贝 首先肯定是要判断该文件名到底存不存在 我们定义一个方法 用来判断
  • NoClassDefFoundError: com/google/common/collect/Maps

    Error Exception in thread main java lang NoClassDefFoundError com google common collect Maps I believe you are missing g
  • Lua基础

    目录 Lua5 3参考手册 软件版本 日志及soc下载工具 os date函数说明 os date格式化符号 示例 显示效果 希望实现 实现思路 关于汉字显示的说明 编辑编译方法可参考 示例代码 运行log记录 PS eink 墨水屏操作库
  • Ubuntu报terminals database is inaccessible

    目录 方法一 1 执行以下命令 2 再次运行clear命令 3 执行以下命令 方法二 参考网址 在Ubuntu的命令行窗口中使用clear命令的时候报terminals database is inaccessible错误 clear te
  • Mac上实时网速、内存等显示

    对我这种有强迫症的 要监控各种参数 比如实时网速显示 这里给大家推荐 iStat Menus 1 官网下载 https bjango com mac istatmenus 2 注册码 仅供学习研究 误作商业用途 xxxx xxxx xxxx
  • Ubuntu 系统中安装htpasswd

    htpasswd是Apache附带的程序 htpasswd生成包含用户名和密码的文本文件 每行内容格式为 用户名 密码 用于用户文件的基本身份认证 当用户浏览某些网页的时候 浏览器会提示输入用户名和密码 比如awstats的日志报表 你肯定
  • LightGBM 直方图优化算法

    给出下面这个广泛使用 直方图优化算法的ppt 本文是对该张ppt的解释 直方图优化算法需要在训练前预先把特征值转化为bin 也就是对每个特征的取值做个分段函数 将所有样本在该特征上的取值划分到某一段 bin 中 最终把特征取值从连续值转化成
  • 两种类型的变量

    在java中你会像下面那样声明变量 String s Hello int i 42 Person p new Person hello 每个变量声明都包含了类型 相比之下 在scala中有两种类型的变量 val创建一个不可变的变量 跟jav
  • 【计算机网络】湖科大微课堂笔记 p33-35 MAC地址、IP地址以及ARP协议

    MAC地址 为什么要有MAC地址 原因如图 MAC地址与帧 MAC地址也被称为物理地址 硬件地址 因为它被固化在网卡上 总览 IEEE 802局域网的MAC地址格式 MAC地址发送顺序 举例 单播 广播 多播 单播 主机B想给C发一个单播帧
  • hive get_json_object json_tuple json解析详解

    1 hive中处理json的两个函数 json是常见的数据接口形式 实际中使用也很广泛 下面我们看看怎么在hive中解析json格式 hive中常用的解析json格式的函数有两个 先看看get json object gt desc fun
  • 【Golang】数据结构-slice类型

    slice底层数据结构 一个指针 指向内存地址 len存储当前的内存使用量 cap存储预留的内存最大容量 type slice struct array unsafe Pointer len int cap int 新建slice make
  • Hugging Face 中文预训练模型使用介绍及情感分析项目实战

    Hugging Face 中文预训练模型使用介绍及情感分析项目实战 Hugging Face 一直致力于自然语言处理NLP技术的平民化 democratize 希望每个人都能用上最先进 SOTA state of the art 的NLP技
  • Eigen库中的Map类到底是做什么的?

    转自 https www zhihu com question 43571898 answer 95934049Map类用于通过C 中普通的连续指针或者数组 raw C C arrays 来构造Eigen里的Matrix类 这就好比Eige
  • LLM大模型推理加速 vLLM;Qwen vLLM使用案例;模型生成速度吞吐量计算

    参考 https github com vllm project vllm https zhuanlan zhihu com p 645732302 https vllm readthedocs io en latest getting s
  • 信号与系统(10)- 周期性信号的频谱

    周期性函数可以在傅里叶级数中展开 也就是说 如果给定了各个频率分量的幅度和相位 则可以确定原信号 频谱是信号的一种图形表示方法 它将各个频率分量上的系数关系用图形的方法表示出来 用来说明信号的特性 并且后续可以给信号处理带来很多便利 频谱图
  • VUE table 列宽度百分比自适应

    由于原来项目中 前台列表页面 使用具体数值的列的宽度 有的电脑分辨率问题造成最右侧的需要拉滚动条 考虑到使用更简单 合理 改成百分比 原代码
  • 人体2D关键点检测 文章+代码(2020-2016)

    目录 2020 HigherHRNet CVPR2020 MSRA微软亚洲研究院 bottom up DarkPose CVPR2020 2nd place entry of COCO Keypoints Challenge ICCV 20
  • STRIDE威胁建模(面向安全应用程序开发的威胁分析框架)

    STRIDE 威胁建模 STRIDE 威胁模型由Microsoft安全研究人员于 1999 年创建 是一种以开发人员为中心的威胁建模方法 通过此方法可识别可能影响应用程序的威胁 攻击 漏洞 进而设计对应的缓解对策 以降低安全风险并满足公司的
  • Uncaught TypeError: Cannot read property 'offsetTop' of null

    在获取内容区块高度 无滚动 时使用offsetTop报如下错误 Uncaught TypeError Cannot read property offsetTop of null 实现效果如图 主要js代码 内容可视区域的高度 client