JS和CSS的交互

最新推荐文章于 2024-10-09 11:19:11 发布

学IT的弟弟

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量199

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67188520/article/details/124109977

版权

JS和CSS的交互

一、样式的基本语法
- 1.1常见样式
- 1.2样式表类型
二、JS与CSS交互案例

一、样式的基本语法

标签选择器
ID选择器
类选择器

1.1常见样式

在这里插入图片描述

1.2样式表类型

行内样式
内部样式表
外部样式表

二、JS与CSS交互案例

//使用style 改变样式
<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			li{
				font-size: 12px;
				color: red;
				background-image: url(img/bg1.gif);
				background-repeat: no-repeat;
				text-align: center;
				height: 33px;
				width: 104px;
				line-height: 38px;
				float: left;
				list-style: none;
			}
		</style>
	</head>
	<body>
	<ul>
	<li>资讯动态</li>
	<li>产品世界</li>
	<li>市场营销</li>
	</ul>
	<script type="text/javascript">
	var len=document.getElementsByTagName("li");
	for(var i=0;i<len.length;i++){
		len[i].onmouseover=function(){
			this.style.backgroundImage="url(img/bg2.gif)";
			}
		len[i].onmouseout=function(){
			this.style.backgroundImage="url(img/bg1.gif)";
			}	
			
		}
	
	</script>
	</body>

//使用className改变样式
	<title>使用classname改变样式</title>
		<style type="text/css">
		li{
			font-size: 12px;
			color: #ffffff;
			background-image: url(images/bg1.gif);
			background-repeat: no-repeat;
			text-align: center;
			height: 33px;
			width:104px;
			line-height:38px;
			float:left;
			list-style:none;
			}
		.out{
			background-image: url(images/bg1.gif);
			}
		.over{
			background-image: url(images/bg2.gif);
			color:#ffff00;
			font-weight:bold;
			cursor:hand;
			}
		</style>
	</head>
	<body>
		<ul>
			<li onmouseover="this.style.backgroundImage='url(img/bg1.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">资讯动态</li>
		    <li onmouseover="this.style.backgroundImage='url(img/bg1.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">产品世界</li>
		    <li onmouseover="this.style.backgroundImage='url(img/bg1.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">市场营销</li>
		
		</ul>