JS学习笔记第十五期--（JS与CSS交互）

JS与CSS交互

style属性

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

document.body.style.backgroundColor = 'red'

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

如CSS中，字体大小为font-size, 使用style属性时，需改为fontSize

隐藏元素

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

元素.style.display = 值
元素.style.visibility = 值

修改className更改样式

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

.lg-red{
	font-size:20px;
	color:red;
}

JS:

元素.className = 'lg-red'
元素.className = ''

拖拽事件

首先我们将需要拖拽的源对象的dragable属性设为true

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

然后给目标对象绑定ondragover事件函数，禁用其默认事件行为

<div ondragover=allowDrag()"">
</div>
<script type = "text/javascript">
	function allowDrag(){
		event.preventDefault()
}
</script>

拖拽事件源对象

ondragstart事件
用户开始拖动元素时触发

ondrag事件
用户拖动元素过程中触发

ondragend事件
用户拖动元素结束后触发

目标对象

ondragenter事件
如鼠标拖动指定对象到容器范围内时会触发该事件

ondragover事件
当某个对象被拖动到容器范围内的时候，该事件将会被触发

ondragleave事件
当某个对象被拖动离开指定容器时，该事件将会被触发

ondrop事件
当源元素被拖入到了指定容器内，并且鼠标停止拖动并释放时将会触发该事件