DOM设置元素样式和添加class名

第一步：先获取

var box = document.queryselector('#box');

第一种写法：

box.style.width='300px';
box.style.height='300px';
box.style.background='red';

缺点是非常繁琐，每一次都要重写一遍需要设置的元素

第二种：

那么就有了第二种

box.style=’width'300px；height='300px；background='red';

如何添加一个class名

第一种

box.name='aa';

box.name='bb;

但是这样‘bb’会完全覆盖掉‘aa’；

升级后

box.name='aa';

box.name=' bb;

在‘bb’前面加空格就解决这个问题了

第二种

利用 classList.add（ ）;

box.classList.add（'aa'）;

box.classList.add（'bb'）;

bb的样式也不会覆盖掉aa；即使box本身有className也不会被新添加的覆盖，会在原有的基础上往后一直添加；

有添加就有删除

 classList . remove（ ‘’）;//删除本身就有的class名