获取云朵

Coddy 移动云朵：HTML/CSS/JS 项目课程的第 7 课，共 18 课。

我们来简短回顾一下如何使用 JS 操作 DOM 元素。

要按类名获取元素，请使用 document.getElementsByClassName：

const elements = document.getElementsByClassName("someName");

上面的代码会获取文档中所有类名为 "someName" 的元素，并组成一个数组。

要修改元素的样式，请使用 style 属性：

const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";

上面的代码会将第一个类名为 "someName" 的元素的背景颜色设为 "red"。

注意：如果 elements 是一个空数组，程序就会出错。

挑战

简单

在 JS 文件中：

获取类名为 "cloud" 的元素
获取 elements 中的第一个元素（也就是唯一的云朵），并设置：
1. 将 top 样式设置为大于 "0px" 的值
2. 将 left 样式设置为大于 "0px" 的值

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

移动云朵：HTML/CSS/JS 项目中的所有课

1简介

简介

4玩转 JS

获取云朵

2容器

5移动云朵

3云计算

6许多云朵

自己练习： Web 在线编辑器