JS——HTML DOM

最新推荐文章于 2024-07-16 16:43:05 发布

我在东软打代码

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量74

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46758732/article/details/119218153

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

在这里插入图片描述

DOM 动画

1、创建动画容器——所有动画都应该与容器元素关联。

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

2、为元素添加样式

应该通过 style = “position: relative” 创建容器元素。
应该通过 style = “position: absolute” 创建动画元素。

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

在这里插入图片描述

我在东软打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为对象树：对象的 HTML DOM 树HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。DOM 动画1、创建动画容器——所有动画都应该与容器元素关联。<div id ="container">
复制链接

扫一扫