JavaScript中的浏览器事件和元素css操作
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t3Ra0P7W-1588915669770)(C:\Users\dell\Desktop\我的前端博客\images\js1.png)]](https://img-blog.csdnimg.cn/20200508132802352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
DOM常见的事件：
鼠标事件
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6jH7Zh2-1588915669774)(C:\Users\dell\Desktop\我的前端博客\images\js2.png)]](https://img-blog.csdnimg.cn/2020050813281778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
表单事件：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UpC7c3Yg-1588915669777)(C:\Users\dell\Desktop\我的前端博客\images\js3.png)]](https://img-blog.csdnimg.cn/20200508132828462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
键盘事件：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pd2hBVzC-1588915669782)(C:\Users\dell\Desktop\我的前端博客\images\js4.png)]](https://img-blog.csdnimg.cn/20200508132841897.png)
<body>
<img src="images/01.jpg">
</body>
<script>
var c=document.querySelector("img");
img.onclick=function(){
alert("kiva");
}
</script>
元素CSS操作
改变元素样式方法外部样式，内部样式，行内样式
外部样式：单纯的JS不能操作外部样式。
内部样式：JS可以操作HTML页面的任何元素，也是操作style标签。
行内样式：JS操作元素样式的常用方法，标签的自带属性style通过点操作元素 style.css属性=“属性值”。
<body>
<img src="images/01.jpg">
<div id="wrap">123</div>
</body>
<script>
var c=document.querySelector("img");
var aa=document.getElementById("warp");
aa.style.color="red";//单个属性
aa.style.cssText="font-size:22px;font-weight=bold";//多个属性。
img.onclick=function(){
c.style.cssText="font-size:22px;font-weight=bold";
}
</script>