<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap.box{
height: 150px;
background-color: #999;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrap" style="width: 150px;"></div>
<script>
let oWrap = document.getElementById(‘wrap‘);
/*
oWrap.style.height = ‘150px‘;
oWrap.style.backgroundColor = ‘red‘;
oWrap.style.border = ‘1px solid #999‘;
*/
//行内样式表中的内容用cssText
// console.log(oWrap.style.cssText);
//这里可以使用+=添加，这是给属性加属性 和上边的3行是一样的 一次性操作多个样式
// oWrap.style.cssText += ‘height:150px;background-color:red;border:1px solid #999‘;
// console.log(oWrap.style.cssText);
//加这些属性的时候需要考虑兼容 直接float是不可以的
oWrap.style.cssFloat = ‘left‘;
oWrap.style.styleFloat = ‘left‘;
//终极操作多个style可以靠操作class名来实现
oWrap.className = ‘box‘;
//但是如果本身有class名字，需要加空格
oWrap.className += ‘ goudan‘;
</script>
</body>
</html>
原文：https://www.cnblogs.com/zhangyu666/p/11477726.html