• javascript 之 className属性


      Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。

      1、用className 属性修改节点的css类别

      代码如下:

     1 <html> 
     2 <head> 
     3 <title>追加CSS类别</title> 
     4 <style type="text/css"> 
     5 .myUL1{ 
     6   color:#0000FF; 
     7   font-family:Arial; 
     8   font-weight:bold; 
     9 } 
    10 .myUL2{ 
    11   text-decoration:underline; 
    12 } 
    13 </style> 
    14 <script language="javascript"> 
    15 function check(){ 
    16   var oMy = document.getElementsByTagName("ul")[0]; 
    17   oMy.className = " myUL2"; //修改CSS类 
    18 } 
    19 </script> 
    20 </head> 
    21 <body> 
    22 <ul onclick="check()" class="myUL1"> 
    23   <li>HTML</li> 
    24   <li>JavaScript</li> 
    25   <li>CSS</li> 
    26 </ul> 
    27 </body> 
    28 </html> 

      运行结果:

                 点击之后为     

      2、追加css类别

     1 <html> 
     2 <head> 
     3 <title>追加CSS类别</title> 
     4 <style type="text/css"> 
     5 .myUL1{ 
     6   color:#0000FF; 
     7   font-family:Arial; 
     8   font-weight:bold; 
     9 } 
    10 .myUL2{ 
    11   text-decoration:underline; 
    12 } 
    13 </style> 
    14 <script language="javascript"> 
    15 function check(){ 
    16   var oMy = document.getElementsByTagName("ul")[0]; 
    17   oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格. 
    18 } 
    19 </script> 
    20 </head> 
    21 <body> 
    22 <ul onclick="check()" class="myUL1"> 
    23   <li>HTML</li> 
    24   <li>JavaScript</li> 
    25   <li>CSS</li> 
    26 </ul> 
    27 </body> 
    28 </html> 

      运行时,单击列表后,实际上<ul> 的class 属性变为:
        <ul onclick="check()" class="myUL1 myUL2"> 

      所以添加css类别的时候类名之前一定要添加空格,才可以实现属性追加。重要的事情说三遍,加空格!加空格!!加空格!!!

      运行结果如下:

           点击之后为  

  • 相关阅读:
    相机标定 和 单应性矩阵H
    全景视频拼接关键技术
    OpenCV图像变换(仿射变换与透视变换)
    用非数学语言讲解贝叶斯定理
    (二)SMO算法
    (一)SVM原理
    什么是赋范线性空间、内积空间,度量空间,希尔伯特空间
    决策树算法(五)——处理一些特殊的分类
    V8学习资源
    perforce 学习资源
  • 原文地址:https://www.cnblogs.com/jizhongjing/p/5039186.html
Copyright © 2020-2023  润新知