JavaScript与CSS交互

---

一、style属性

通过元素的style属性，可以获取或修改元素的CSS样式
如下代码所示：将body的背景色设置为red

document.body.style.backgroundColor = ‘red’
注意：原css样式为短横线命名法，在使用style属性时，需转换称小驼峰命名法
如CSS中，字体大小为font-size, 使用style属性时，需改为fontSize

小试牛刀：
创建三个按钮，对应三种颜色，点击按钮时，将页面背景修改为对应颜色

参考代码：

<input type="button" name="" id="" value="red" onclick="changeColor( )" />
<input type="button" name=" " id="" value="yellow" onclick="changeColor( )" />
<input type="button" name="" id="" value="blue" onclick="changeColor( )" /><script type="text/javascript">
	function changeColor()
		document.body.style.backgroundColor=event.target.value
	}
</script>

二、隐藏元素

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

小试牛刀：
创建一段文本，文本下方放置两个按钮，点击按钮可隐藏/显示上方文本。分别尝试visibility和display两种方式实现

参考代码：

<div id="content">这是一段文本</div>
<input type="button" name="" id="" value="显示" onclick="show()"/>
<input type="button" name="" id="" value="隐藏" onclick="hide()" />
<script type="text/javascript">
	function show() {
		document.getElementById( 'content' ).style.visibility="visible"
	}
	function hide() {
		document.getElementById( 'content' ).style.visibility="hidden"
	}
</ script>

三、修改className更改样式

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

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


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

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

小试牛刀：
创建一个列表，当鼠标移入列表中某一项时，为该项添加lg-red类（设置如上），鼠标移出时，移除该类

<ul>
	<li onmouseover="highlight()" onmouseout="reset()">苹果</li>
	<li onmouseover="highlight()" onmouseout="reset()">香蕉</li>
	<li onmouseover="highlight()" onmouseout="reset()">橙子</li>
	<li onmouseover="highlight()" onmouseout="reset()">菠萝</li>
</ul>
<script type="text/javascript">
	function highlight() {
		event.target.className = "lg-red"
	}
	function reset() {
		event.target.className = ""
	}
</ script>

四、拖拽事件

将需要拖拽的源对象的dragable属性设为true

p draggable=“true”>拖动我

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

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

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

小试牛刀：
使目标文本变为可拖动状态，让其可以在两个容器之间来回拖动

容器盒子：

<div class="container" ondragover="allowDrag()"ondrop="drop()">
	<p draggable="true" ondragstart="drag()">目标文本</p>
</div>
<div class="container" ondragover="allowDrag()" ondrop="drop()"></div>

效果代码：

<script type="text / javascript">
	var current0bj
	function allowDrag() {
		event.preventDefault()
	}
	function drag(){
		current0bj = event.target
	}
	function drop(){
		event.target.appendChild( current0bj)
	}
</script>

---