JavaScript的className的用法

最新推荐文章于 2024-03-15 16:56:39 发布

★Sir

最新推荐文章于 2024-03-15 16:56:39 发布

阅读量2.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ljs_cn/article/details/52800261

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

className是类别选择器的名字，使用这个className可以进行动态更改某个标签的类的属性值。例如：

简易版的
运行后，直接显示为，类的属性值改变后的效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>className的使用</title>
        <style type="text/css">
            .one{width: 200px;height: 50px;background: red;}
            .two{width: 400px;height: 100px;background: #d8d8d8;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                //document.getElementById('aa').className='one';
                //alert('one'); 
                document.getElementById('aa').className='two';
            };
    </script>
    </head>
    <body>      
        <p id="aa" title="" class="one">sds</p>
    </body>
</html>

加入按钮 点击后，实现 className 的作用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>className的作用</title>
        <style type="text/css">
            .one{width: 200px;height: 50px;background: red;}
            .two{width: 400px;height: 100px;background: #d8d8d8;}
        </style>
        <script type="text/javascript">
        //window.onload=function(){
            //document.getElementById('aa').className='two';
//      };          
            function aa(){
                var a=document.getElementById('aa');
                a.className='two';
            }
        </script>
    </head>
    <body>
        <input onclick="aa()" type="button" name="" id="" value="换色" />
        <p id="aa" title="" class="one">sds</p>
    </body>
</html>