键盘事件
节点属性中有以下几个事件用于键盘事件 keyDown：按下键盘，长按叠加 keyUp：抬起键盘 keyPress：按下键盘的过程，发生在keyUp之前(无法识别功能键) 相关属性： keyCode：键盘值 A:65 a:97 0:48（数字键盘上为96） 四个方法向从左开始顺时针为：37-40
样式操作
1，单独样式： 节点.style.样式名 = “样式值” 例：p.style.color = “red”;//将p节点的文字改为红色 2，多个样式： （1）节点.className=“类名”； （2）节点.style.cssText = “样式列表”
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mydivstyle{
background-color: blue;
font-size: 50px;
border: yellow 5px solid;
}
</style>
</head>
<body>
<div id="myDiv">我在div中</div>
</body>
<script>
var div = document.getElementById("myDiv");
//------onkeydown事件，可以显示功能键
// document.onkeydown = function(ev){
// div.innerHTML = "你按的键的键值为："+ev.keyCode;//这个键值不区分大小写
// }
// //-----onkeyup事件，可以显示功能键
// document.addEventListener("keyup",function(ev){
// div.innerHTML="你抬起键的键值为："+ev.keyCode;//这个键值也不分区大小写
// })
//----onkeypress事件,按下后不停执行，不能发现按下的功能键
//这个事件只能找到能显示的字符
// document.onkeypress = function(){
// // div.innerHTML = "你press了"+window.event.keyCode;
// console.log(window.event.keyCode)
// }
//以下例子是当按下a键时，div背景改为红色,按下b键时，背景改为黄色
//按下c键时 使用mydivstyle这个样式表
//按下d键时 批量添加/修改 样式
document.onkeypress = function(ev){
var keycode = ev.keyCode;
//alert(keycode)
switch(keycode)
{
//单独添加样式的写法
case 97:
div.style.backgroundColor = "red";//单独添加或修改样式时，如果原样式属性名中有
//下划线或横线时，需要将横线删除，采用小驼峰的写法
break;
case 98:
div.style.backgroundColor = "yellow";
div.style.fontSize = "40px";
break;
case 99:
div.className = "mydivstyle";
break;
//修改样式表名的写法
case 100:
div.style.cssText = "font-size:40px; color:green; background-color:pink"
break;
}
}
</script>
</html>
