JavaScript与CSS交互

一、style属性
通过元素的style属性，可以获取或修改元素的css样式

document.body . style.backgroundColor = ' red '

原css样式为短横线命名法，在使用style属性时，需转换成小驼峰命名法，如fontSize

1、隐藏元素

属性	visibility	display
值	visible/hidden	none/block/inline-block
区别	将元素设为不可见，但占用空间	将元素隐藏，不占用空间

2、className更改样式
通过修改元素的所属类，并对不同的类设置相应样式，同样可达到更改样式的目的

3、拖拽事件
将需要拖拽的源事件的dragable属性设为true

<p draggable="true">拖动我</ p>

源事件	目标事件
ondragstart事件：用户开始拖动元素时触发	ondragenter事件：当被鼠标拖动的对象进入其容器范围内时触发
ondrag事件：元素正在拖动时触发	ondragover事件：当被拖动的对象在容器范围内时触发
ondragend事件：用户完成元素拖动后触发	ondrop事件：源元素被拖入容器内，并且释放鼠标时触发