JavaScript中的瀏覽器事件和元素css操作
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-t3Ra0P7W-1588915669770)(C:\Users\dell\Desktop\我的前端博客\images\js1.png)]](https://pic1.xuehuaimg.com/proxy/csdn/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://pic1.xuehuaimg.com/proxy/csdn/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://pic1.xuehuaimg.com/proxy/csdn/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://pic1.xuehuaimg.com/proxy/csdn/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>