原生js中使用classList操作class

最新推荐文章于 2024-06-14 20:36:20 发布

海涛高软

最新推荐文章于 2024-06-14 20:36:20 发布

阅读量653

点赞数

分类专栏： CesiumJS

本文链接：https://blog.csdn.net/qq_15267341/article/details/113845682

版权

CesiumJS 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

实现按下鼠标，为某个元素添加一个类

松开鼠标，将某个元素去掉一个类

最终实现 鼠标按下，换颜色，松开，恢复默认颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .fontSize {
        font-size: 50px;
    }

    .changeColor {
        color: red;
    }
</style>
<body>

   <div class="fontSize" id="div01">
       字体颜色
   </div>


<script>
	document.addEventListener( "mousedown", function () {
		document.getElementById( "div01" ).classList.add( "changeColor" );
	} );
	document.addEventListener( "mouseup", function () {
		document.getElementById( "div01" ).classList.remove( "changeColor" );
	} );
</script>
</body>
</html>

FR：徐海涛（hunk Xu)
QQ技术交流群：386476712