设置样式和类名操作

 

设置样式

var div = document.querySelector("div");
// 标签.style.css属性 = 值
div.style.width = '200px';
div.style.height = '200px';
div.style["background-color"] = 'red'; //因为有斜杠可以用中括号代替.或者用驼峰，如下
div.style.border = '5px solid #000';
div.style.borderColor = '#0f0';

 

类名操作

<!Doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
    .fl{
        float:left;
    }
    .clearfix:after{
        content:'';
        display:block;
        clear:both;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
    .hezi{
        border:20px solid #0f0;
    }
    .m{
        margin:50px;
    }
    </style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.querySelector("div");
// 类名操作 - 标签.className
div.className = 'box';

div.className = 'box hezi';

div.className = '';

div.className = 'box m';

console.log(div.className);
</script>
</html>

 

posted @ 2021-01-10 22:17  技术活当赏  阅读(208)  评论(0)    收藏  举报