JavaScript的className的用法

来源：互联网发布：三年级英语下载软件编辑：程序博客网时间：2024/05/29 13:25

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>

0 0