JavaScript和CSS的交互

最新推荐文章于 2023-12-06 11:09:52 发布

JoneClassMate

最新推荐文章于 2023-12-06 11:09:52 发布

阅读量267

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/m0_63300795/article/details/124108075

版权

一，样式的基本语法

二，常见样式

三，样式表类型

四，JavaScript访问样式的常见方法

五，Style对象的常用属性

六，JavaScript中常用的事件列表

七，案例

一，样式的基本语法

1 标签选择器

input{
   width:120px;
   border:solid 1px #ff0000;
}

2 ID选择器

#flow{color:#ff0000}

3 类选择器

.center{
   text-align:center;
   font-weight:bold;
}

二，常见样式

三，样式表类型

1 行内样式

<input name="user" type="text" style="width:100px; border:solid 1px #cccccc;" />

2 内部样式表

<html>
<head>
<title>内部样式表</title>
<style type="text/css">
    body{
	font-size:12px;	
	line-height:20px;
	}
   .video{
	margin: 3px;
	float: left;
	}
</style>
</head>

3 外部样式表

<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
……
</body>
</html>

四，JavaScript访问样式的常见方法

1. 使用getElement系列方法访问

2. 改变样式属性：

className属性

Style属性

五，Style对象的常用属性

六，JavaScript中常用的事件列表

七，案例

案例一制作广告


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="position: fixed;">
			<img src="img/adv.jpg" >
		</div>
		<div align="center">
			<img src="img/main1.JPG" >
			<img src="img/main2.JPG" >
			<img src="img/main3.JPG" >
		</div>
	</body>
</html>

案例二鼠标选中效果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				border: 2px solid red;
			}
			.b{
				
			}
		</style>
	</head>
	<body>
		<table width="2000px">
			<tr>
				<td><img src="img/new_01.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
				<td><img src="img/new_02.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
				<td><img src="img/new_03.jpg" onmousemove="fa(this)" onmouseleave="fb(this)"></td>
			</tr>
		</table>
		<script type="text/javascript">
			function fa(obj){
				obj.className="a";
			}
			function fb(obj) {
				obj.className="b";
			}
		</script>
	</body>
</html>

案例三鼠标选中改变效果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
					border: 1px solid whitesmoke;
			}
			.a{
				border: 1px solid red;
			}
			.b{
				
			}
		</style>
	</head>
	<body>
		<table class="aa" align="center" width="1000px">
			<tr align="center">
				<td colspan="5"><img src="img/show3_big.jpg" id="sa"></td>
				</tr>
				<tr align="center">
					<td><img src="img/show1.jpg" onmousemove="fa(this,'show1_big.jpg')" onmouseleave="fb(this)"></td>
					<td><img src="img/show2.jpg" onmousemove="fa(this,'show2_big.jpg')" onmouseleave="fb(this)"></td>
					<td><img src="img/show3.jpg" onmousemove="fa(this,'show3_big.jpg')" onmouseleave="fb(this)"></td>
					<td><img src="img/show4.jpg" onmousemove="fa(this,'show4_big.jpg')" onmouseleave="fb(this)"></td>
					<td><img src="img/show5.jpg" onmousemove="fa(this,'show5_big.jpg')" onmouseleave="fb(this)"></td>
				</tr>
		</table>
	</body>
	<script type="text/javascript">
		function fa(obj,abc){
			obj.className="a";
			var a=document.getElementById("sa");
			a.setAttribute("src","img/"+abc);
		}
		function fb(obj){
			obj.className="b";
		}
	</script>
</html>

JoneClassMate

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和CSS的交互

一，样式的基本语法1 标签选择器input{ width:120px; border:solid 1px #ff0000;}2 ID选择器#flow{color:#ff0000}3 类选择器.center{ text-align:center; font-weight:bold;}二，常见样式三，样式表类型1行内样式<input name="user" type="text" style="width:100...
复制链接

扫一扫