JavaScript中的浏览器事件和元素css操作_浏览器编辑元素事件-优快云博客

本文讲解了JavaScript中处理浏览器事件的方法及元素CSS操作技巧，包括鼠标、表单和键盘事件的响应，以及如何使用JS修改元素的外部、内部和行内样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript中的浏览器事件和元素css操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t3Ra0P7W-1588915669770)(C:\Users\dell\Desktop\我的前端博客\images\js1.png)]$

DOM常见的事件：

鼠标事件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6jH7Zh2-1588915669774)(C:\Users\dell\Desktop\我的前端博客\images\js2.png)]$

表单事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UpC7c3Yg-1588915669777)(C:\Users\dell\Desktop\我的前端博客\images\js3.png)]$

键盘事件：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pd2hBVzC-1588915669782)(C:\Users\dell\Desktop\我的前端博客\images\js4.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>