JavaScript DOM操作：杨中科教程笔记

4星 · 超过85%的资源需积分: 10 76 浏览量更新于2024-09-13 收藏 15KB TXT 举报

"这是一份关于DOM操作的学习笔记，由传播智客杨中科讲解，主要涵盖了对HTML元素的动态操作，包括改变元素尺寸和动画效果的实现。" 在这些笔记中，我们可以看到两个主要的知识点： 1. **DOM元素操作**： - `getElementById`方法：这是JavaScript中用于获取具有特定ID的HTML元素的关键方法。在示例中，通过`document.getElementById('div1')`获取了ID为"div1"的div元素，从而能够对它进行后续的样式修改。 - `style`属性：这个属性允许我们直接操作HTML元素的内联样式。例如，`div1.style.width`和`div1.style.height`分别用于设置或获取元素的宽度和高度。 2. **JavaScript动画实现**： - `setInterval`函数：用于在指定的时间间隔内重复执行某个函数。在这个例子中，`setInterval("inc()",100)`每100毫秒调用一次`inc`函数，实现了渐变效果。 - `clearInterval`函数：当达到特定条件（如元素宽度达到200px）时，使用此函数停止`setInterval`设置的定时器。这确保了动画在达到目标尺寸后停止。 - 动态更新样式：`inc`函数中，通过增加`div1`的宽度和高度，并将新的值设置回`style.width`和`style.height`，创建了元素尺寸逐渐增大的动画效果。这里使用`parseInt`函数将CSS的像素值转换为整数以便进行数值比较和加法操作。此外，还展示了如何在HTML中嵌入JavaScript代码，以及如何通过HTML事件处理程序（如`onclick`和`onload`）来触发JavaScript函数。这些基础知识对于理解网页动态交互至关重要。通过杨中科老师的讲解，学习者能够更好地理解和应用DOM操作，为创建交互式Web页面打下坚实基础。这份笔记不仅提供了理论知识，还包含实际的代码示例，便于学习者实践和掌握。

1.英文连续的单词在div中不会换行，是应为把它当成了一个单词
设置块的大小，并发大块div：
<body>
<div id="div1" style="width:10px;height:100px;border-style:solid; border-color:Red;border-width:1px;">案例：点击按钮动态变大，提示：
英文字母连续单词不会在中间自动换行额陷阱</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');div1.style.width='200px';
div1.style.height='200px' "/>
</body>、
1.2.自动放大块的长与宽
<head>
<title></title>
<script type="text/javascript">
var showIntervalId
function showDiv() {
showIntervalId = setInterval("inc()", 100); //启动定时器
//取得定时器的showIntervalId，为方便清理定时器
}
function inc() {
var div1 = document.getElementById("div1");//获得块的对象
var oldwidth = div1.style.width;//获得块的宽和高
var oldheight = div1.style.height;
oldwidth = parseInt(oldwidth, 10);//将块的宽和高转化成整数
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {//当宽达到200px,停止增大
//oldwidth += 10;
//停止计时
clearInterval(showIntervalId);
}
else {
oldwidth += 10;

剩余14页未读，继续阅读

三多10

粉丝: 0
资源: 8

JavaScript DOM操作：杨中科教程笔记

杨中科 传智播客 DOM 学习笔记

传播智客杨中科DOM 10-20 学习笔记

传播智客扬中科老师讲的DOM 学习笔记

什么时低代码平台，国内有哪些好的低代码平台

report ETL .ffff

基于ssm的共享充电宝管理系统设计与实现.docx

操作系统大作业_Linux_命令行_OSWork.zip

Java项目-基于SSM+Jsp的社区管理与服务系统的设计与实现（源码+数据库脚本+部署视频+代码讲解视频+全套软件）

吉他谱_Show Me How To Live - Audioslave.pdf

Linux系统初始化脚本，包括设置时区并同步时间、禁用selinux、关闭防火墙

最新资源

杨中科传智播客 DOM 学习笔记