JavaScript之className

时间：2019-01-04 21:26:06 阅读：155 评论：0 收藏：0 [点我收藏+]

标签：code box char 一个 set url 代码示例 htm fun

这个知识点比较简单,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>