zoukankan      html  css  js  c++  java
  • JavaScript之className

    这个知识点比较简单,className就是JavaScript的方式给相应元素区添加class选择器样式

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>className</title>
        <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: red;
            border: 2px solid yellow;
            float: left;
            margin-left: 100px;
            font: 30px/100px "simhei";
            color: #fff;
            transition: 0.3s;
        }
        .a{
            border: 8px solid #26FF08;
            background: #2E00EF;
            color: #ccc;
            border-radius: 50%;
        }
        .b{
            border: 4px solid #26FF08;
            background: #7B8113;
            color: #220077;
            border-radius: 50%;
        }
        .c{
            border: 4px solid #26FF08;
            background: url("img1.jpg");
            background-size: 100% 100%;
            color: #220077;
            border-radius: 50%;
        }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
    </html>
    
    <script type="text/javascript">
        //通过id获取相应div元素区
        var div1=document.getElementById('box1');
        var div2=document.getElementById('box2');
        var div3=document.getElementById('box3');
        // 点击相应div元素区,为相应div元素区增加相应样式
        div1.onclick=function(){
              div1.className='a';
        };
        div2.onclick=function(){
              div2.className='b';
        };
        div3.onclick=function(){
              div3.className='c';
        };
    </script>

    初始效果:

    根据上面代码可知点击第一个div元素区获得a样式:

     

    根据上面代码可知点击第二个div元素区获得b样式:

    根据上面代码可知点击第三个div元素区获得c样式:

    小可爱们,看懂了嘛,喜欢的小可爱双击哦!

  • 相关阅读:
    appium---纯web app测试
    appium---元素定位工具
    appium---[ADB] Killing adb server on port 5037报错
    pytest---自定义用例识别规则
    pytest---用例执行顺序
    解决Could not find function xmlCheckVersion in library libxml2问题
    pytest---测试框架初探
    layoutSubviews何时被调用
    'addTimeInterval:' is deprecated: first deprecated in iOS 4.0
    iOS7 表格separatorInset的处理
  • 原文地址:https://www.cnblogs.com/zjm1999/p/10222287.html
Copyright © 2011-2022 走看看