DOM编程（4）元素的拖动

---

JavaScript与CSS交互

一、更改css样式

基本语法：

元素对象.style.css属性名=“值”

<div id="">
			更改背景颜色
		</div>
		<script type="text/javascript">
			document.querySelector("div").style.backgroundColor="#B2CBFF";
		</script>

运行结果如下：

二、获取css样式

方法名	描述
window.getComputedStyle(元素对象)	获取css所有属性

<div id="box">
			获取css外联样式
		</div>
		<script type="text/javascript">
console.log(window.getComputedStyle(document.querySelector("#box")).backgroundColor)

运行结果如下

三、元素的隐藏与显示

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

演示代码如下

<div id="box">
			盒子一
		</div>
		<div>
			盒子二
		</div>
		<script type="text/javascript">
			document.querySelector("#box").style.display="none"; //不占用空间
		</script>

display方式隐藏，运行效果如下

<div id="box">
			盒子一
		</div>
		<div>
			盒子二
		</div>
		<script type="text/javascript">
			document.querySelector("#box").style.visibility="hidden"; //隐藏但用空间
		</script>

visibility方式隐藏，运行结果如下

四、元素拖拽事件

源对象事件

事件名	描述
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发
ondragend	用户完成元素拖动时触发

目标对象

事件名	描述
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发
ondragover	当被拖动的对象在容器范围内时触发
ondragleave	当被拖动对象离开容器四触发事件
ondrop	当被拖动对象被拖入容器内，并且释放鼠标时触发

演示代码如下

注意：
1.被拖动元素一定加上 draggable=“true”
2.目标对象一定通过ondragover事件禁用其默认行为

总结

注意：被拖动元素一定加上draggable=“true”