动态操作类样式并进行类样式累加

最新推荐文章于 2023-06-14 22:18:43 发布

一只极度渴望成长的Giser

最新推荐文章于 2023-06-14 22:18:43 发布

阅读量200

点赞数

分类专栏： Javascript、JQuery练习文章标签：动态操作类样式并进行类样式累加

本文链接：https://blog.csdn.net/qq_32077521/article/details/97615636

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        .cls0 {
        
        }
        .cls1 {
        width:500px;
        height:500px;
        border:1px solid red;
        }
        .cls2 {
        font-size:xx-large;
        color:blue;
        background-color:aqua;
        }
        .cls3 {
        font-family:Italic;
        }
    </style>
    <button id="btn1" class="cls0">btn1</button>
    <button id="btn2">btn2</button>
    <button id="btn3">btn3</button>
    <div id="div1">
        这是一个div
    </div>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                document.getElementById('div1').className += ' cls1';//对类样式进行累加，记得加空格
            };
            document.getElementById('btn2').onclick = function () {
                document.getElementById('div1').className += ' cls2';
            };
            document.getElementById('btn3').onclick = function () {
                document.getElementById('div1').className += ' cls3';
            };
        };
    </script>
</body>
</html>

一只极度渴望成长的Giser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态操作类样式并进行类样式累加

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /></head>...
复制链接

扫一扫

专栏目录