属性操作-动态添加类名

最新推荐文章于 2025-05-21 14:02:44 发布

erdouzhang

最新推荐文章于 2025-05-21 14:02:44 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/72895882

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了如何在HTML元素上动态地添加和管理类名，重点在于属性操作，适用于前端开发中的交互和样式控制。通过示例代码，详细阐述了如何手动设置和移除元素的class属性，以实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加类名</title>
    <style>
        #icon {font-size: 15px;}
        .red {/*预先设置好类*/
            width: 300px;
            background-color: red;
            padding: 10px;
            color: yellow;
            border: 5px solid #ccc;
        }
        .yellow {/*预先设置好类*/
            width: 300px;
            padding: 10px;
            border: 10px solid #ccc;
            background-color: yellow;
            color: red;
        }
    </style>
    <script>
        window.onload = function(){
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var btn3 = document.getElementById('btn3');
            var btn4 = document.getElementById('btn4');
            var con = document.getElementById('con');

            var num = 15;//默认字号大小，在此基础上进行增减

            btn1.onclick = function(){              
                num ++; //字号增加1
                // alert(num);查看弹出的num
                con.style.fontSize = num + 'px';//拼接成像素单位                   
            }
            btn2.onclick = function(){
                num --;
                con.style.fontSize = num + 'px';
            }
            btn3.onclick = function(){          
                // 添加类名
                con.className = 'red';
            }   
            btn4.onclick = function(){
                con.className = 'yellow';
            }
        }
    </script>
</head>
<body>
    <input type="button" value="+" id="btn1">
    <input type="button" value="-" id="btn2">
    <input type="button" value="红色" id="btn3">
    <input type="button" value="黄色" id="btn4">
    <p id="con">我是段落我是段落。。。</p>
</body>
</html>

注意：

手动设置属性如下：

// con.style.color = 'red';
// con.style.width = '300px';
// con.style.background = 'red';
// con.style.padding = '20px';
// con.style.color = 'yellow';
// con.style.border = '5px solid #ccc';