JS代码：js样式改变特效、js特效组成部分、js标签放置位置、js放置类型

最新推荐文章于 2021-07-20 15:21:24 发布

原创最新推荐文章于 2021-07-20 15:21:24 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS

Web 同时被 2 个专栏收录

80 篇文章

订阅专栏

JavaScript

23 篇文章

订阅专栏

本文介绍如何使用JavaScript实现页面元素的样式特效，包括鼠标悬停时背景颜色变化及圆角效果等。文章详细解释了事件设置、触发机制以及样式修改的具体步骤，并展示了内部、内联与外部三种不同类型的JavaScript代码放置方式。

1、js样式改变特效

<img src="/img/dog.png" id="dog">
	
</body>
<script>
dogobj=document.getElementById('dog');

dogobj.onmouseenter=function(){
	this.style.background='#888';
	this.style.borderRadius='128px';
}
</script>

2、js特效组成部分:

1)设置事件
2)事件触发
3)属性改变或样式改变

3、js标签放置位置:

js标签:

<script>
	//js代码!	
</script>

js标签放置位置

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		// 1)定义变量
		// 2)定义函数
	</script>
</head>
<body>
	<!-- html实体标签	 -->
</body>
<script>
	//特效代码
</script>
</html>

4、js放置类型:

1)内联
2)内部
3)外部(推荐)

<script>
//js内部
dogobj=document.getElementById('dog');

dogobj.onmouseenter=function(){
	this.style.background='#00f';
	this.style.borderRadius='128px';
}
</script>

//js内联
		<img src="/img/dog.png" id="dog" onclick='this.src="/img/sd.png"'>

//js外部
		<script src='index.js'></script>