当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript中控制类名className 属性

javascript中控制类名className 属性

2020年03月18日  | 移动技术网IT编程  | 我要评论 
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript中控制类名classname 属性</title>
 6         <style type="text/css">
 7             input{
 8                 font-size: 12px;
 9             }
10             .beijing{
11                 background-color: #4682b4;
12                 color: #ffffff;
13             }
14             .guoqing{
15                 font-size: 20x;
16                 font-weight: bold;
17             }
18         </style>
19     </head>
20     <body>
21         <div id="con" class="beijing">今年国庆想去北京看一看</div>
22         <form action="" method="post">
23             <input type="button" name="" id="" value="点击控制" onclick="rec()"/>
24         </form>
25         <script type="text/javascript">
26             var mychar=document.getelementbyid('con');
27             document.write('此时div的clas的属性值'+mychar.classname)//输出clas属性
28             function rec(){
29                 mychar.classname='guoqing';//改变class类名
30                 // var myrec=confirm('北京天安门怎么样');
31                 // if(myrec==true){
32                 //     document.write('是的，我想去');
33                 // }else{
34                 //     document.write('你了，国庆怎么干嘛');
35                 // }
36             }
37         </script>
38     </body>
39 </html>

classname 属性设置或返回元素的class 属性，语法为//object.classname = classname;
"控制类名classname属性"作用:1.获取元素的class 属性2. 为网页内的某个元素指定一个css样式来更改该元素的外观

 测试：通过classname属性来设置元素的样式:

1.给id="p1"元素通过classname添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。
2.给id="p2"元素通过classname修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="content-type" content="text/html; charset=gb2312">
 5 <title>classname属性</title>
 6 <style>
 7     body{ font-size:16px;}
 8     .one{
 9         border:1px solid #eee;
10         width:230px;
11         height:50px;
12         background:#ccc;
13         color:red;
14     }
15     .two{
16         border:1px solid #ccc;
17         width:230px;
18         height:50px;
19         background:#9cf;
20         color:blue;
21     }
22     </style>
23 </head>
24 <body>
25     <p id="p1" > javascript使网页显示动态效果并实现与用户交互功能。</p>
26     <input type="button" value="添加样式" onclick="add()"/>
27     <p id="p2" class="one">javascript使网页显示动态效果并实现与用户交互功能。</p>
28     <input type="button" value="更改外观" onclick="modify()"/>
29 
30     <script type="text/javascript">
31        function add(){
32           var p1 = document.getelementbyid("p1");
33           p1.classname="one";
34        }
35        function modify(){
36           var p2 = document.getelementbyid("p2");
37           p2.classname="two";
38        }
39     </script>
40 </body>
41 </html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网