16.项目6 元素位置、尺寸与节点关系.docx

课程教学设计

课程名称

本课名称

所授章节

项目6商品放大镜——DOM对象

授课对象

选用教材

《JavaScript前端开发程序设计项目式教程（微课版）（第3版）》

课时数

2

【学情分析】

知识基础

学生已掌握元素的获取、样式和内容修改，但对于元素在页面中的精确位置、自身尺寸以及与其他元素的层级关系（节点关系）尚不清晰。

能力基础

能够改变元素的外观，但无法实现需要精确坐标计算的交互效果（如拖拽、放大镜）。

素养基础

开始接触更复杂的布局和交互需求，意识到需要更深入地理解元素的空间信息。

【教学目标】

知识目标

1.掌握offsetLeft、offsetTop、offsetWid