JavaScript 与html的元素产生关联

最新推荐文章于 2023-10-11 21:13:27 发布

Xu_Cat

最新推荐文章于 2023-10-11 21:13:27 发布

阅读量2.1k

点赞数

分类专栏：临时学JS 文章标签： javascript

本文链接：https://blog.csdn.net/xubaifu1997/article/details/51757678

版权

前情摘要

一个需求。
存在一个长宽为50像素的淡灰色div块，想让它在被点击后，文字变成“White”，背景颜色变成深沉的黑。如何使用JavaScript来实现呢？

效果

点击前

点击后

关键字

getElementById
- 通过id获取网页中的元素
getElementsByClassName
- 通过类名获取网页中的元素，会获得一个数组
getElementsByTagName
- 通过标签获取网页中的元素，会获得一个数组

Example

getElementById

首先，在html文件中准备一个div备用

<!--样式-->
#div_text {
    width:50px;
    height:50px;
    background-color:#CCC;
}
<!--待会要用到的div-->
<div id="div_text" onclick="changeColorAndFont()">Black</div>

参考解释：

- 定义了一个id为“div_text”的div标签

- onclick="changeColorAndFont()"表示当这个div被单击时，执行changeColorAndFont()函数

接着，我们要写出changeColorAndFont这个函数，实现我们的需求，更换文字、文字的颜色和背景颜色

function changeColorAndFont() {
    var divText = document.getElementById("div_text");
    divText.style.backgroundColor = "#333";
    divText.style.color = "#FFF";
    divText.firstChild.nodeValue = "White";
}

参考解释：

var divText = document.getElementById("div_text");

利用document.getElementById，参数是字符串，获取id为”div_text”的元素，并将该元素赋给divText。

divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";

通过.style获取该元素的CSS属性，其实看名字也可以看出来backgroundColor是背景颜色，color是字体颜色。

divText.firstChild.nodeValue = "White";

这里的firstChild可能一开始比较难理解

<body>
<h1></h1>
<div>Black</div>
</body>

在html中，有节点这么一个概念，比如上面的代码，划分一下，就是

body
- h1
- div
  - Black

像族谱一样，body的子节点(child)有两个，分别是h1和div。

然而值得注意的是，Black这个文本内容，也算是div的一个子节点(文本节点)。

所以divText.firstChild.value的意思就是其后代文本节点的值，如果在改变其的值之前使用

alert(

最低0.47元/天解锁文章

Xu_Cat

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 与html的元素产生关联

前情摘要一个需求。存在一个长宽为50像素的淡灰色div块，想让它在被点击后，文字变成“White”，背景颜色变成深沉的黑。如何使用JavaScript来实现呢？效果点击前点击后关键字getElementById 通过id获取网页中的元素getElementsByClassName 通过类名获取网页中的元素，会获得一个数组getElementsByTagName 通过标签获
复制链接

扫一扫