JavaScript与CSS的交互（五）

最新推荐文章于 2024-10-03 16:00:14 发布

一麟yl

最新推荐文章于 2024-10-03 16:00:14 发布

阅读量394

点赞数 3

文章标签： css javascript 交互

本文链接：https://blog.csdn.net/m0_67376124/article/details/123276242

版权

一，样式表

1.样式表中的三种选择器

ID选择器：# a{}
类选择器：.a{}
标签选择器：input{}

2.样式表中的常见属性

边框属性

边框属性	描述
border-width	设置边框的宽度
border-color	设置边框的颜色
border-style	设置边框的样式

边界属性

边界属性	描述
margin-left	分别设置元素中的左、右、上、下外边距
margin-right
margin-top
margin-bottom

填充属性

填充属性	描述
padding-left	分别设置元素中的左、右、上、下内边距
padding-right
padding-top
padding-bottom

文本属性

文本属性	描述
font-size	字体大小
font-family	字体类型
font-style	字体样式
font-color	字体颜色
text-align	文本对齐
line-height	行高

背景属性

背景属性	描述
background-color	设置背景颜色
background-image	设置背景图像
background-repeat	设置一个图片的平铺方式

2.三种样式表

样式表	语法格式	优点	缺点	使用情况	控制范围
行内	<div style="..."></div>	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签
内部	<style>...</style>	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部	<link rel="stylesheet" href="..." />	完全实现结构和样式分离	需要引入	最多强烈推荐	控制整个站点

二，具体案例

1.鼠标悬停图片放大效果

原理：先排版好图片，再编辑函数设置div的位置的图片路径，当鼠标移入小图片的时候出发鼠标移入事件，更换图片的路径。代码如下：

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>实现鼠标悬停的效果</title>
		<!-- 编辑内部样式，将文本的对齐形式设置为居中对齐 -->
		<style type="text/css">
			td {
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			//传入一个标签和图片的路径
			function over(obj_small, obj_big) {
				obj_small.style.border = "solid 1px #ff0000"; //设置标签的边框
				document.getElementById("big").src = "images/" + obj_big; //根据ID拿到元素，再设置图片的路径
			}
			//创建设置边框的函数（当鼠标移除的时候就将边框的宽度设置为0）
			function out(obj_small) {
				obj_small.style.border = 0;
			}
		</script>
	</head>

	<body>
		<!-- 排版 -->
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td colspan="5"><img src="images/show1_big.jpg" id="big" /></td><!-- 设置跨单元格5 -->
			</tr>
			<tr>
				<td style="height:60px;"><img src="images/show1.jpg" onmouseover="over(this,'show1_big.jpg')"
						onmouseout="out(this)" /></td>
				<td><img src="images/show2.jpg" onmouseover="over(this,'show2_big.jpg')" onmouseout="out(this)" /></td>
				<td><img src="images/show3.jpg" onmouseover="over(this,'show3_big.jpg')" onmouseout="out(this)" /></td>
				<td><img src="images/show4.jpg" onmouseover="over(this,'show4_big.jpg')" onmouseout="out(this)" /></td>
				<td><img src="images/show5.jpg" onmouseover="over(this,'show5_big.jpg')" onmouseout="out(this)" /></td>
			</tr>
		</table>

	</body>
</html>

2.实现广告悬停的效果

原理：当滑动滚动条的时候，设置广告位置（位置为滚动条滑动的距离+广告的原位置），代码如下：

//实现悬停效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现图片悬停的效果</title>
		<style type="text/css">
			div {
				border: 2px solid bisque;
				position: absolute;
				right: 20px;
				top: 20px;
				/* 设置绝对布局 */
			}
		</style>
	</head>
	<body>
		<div id="advertise">
			<img width="100px" height="100px" src="imgs/1.gif" />
		</div>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<p>hello world!</p>
		<script type="text/javascript">
			//创建图片移动的函数
			window.onscroll = () => {
                // 设置竖直位置
				advertise.style.top = document.documentElement.scrollTop + 20 + "px";
				// 设置水品位置
				advertise.style.left = document.documentElement.scrollLeft - 20 + "px";
			}
		</script>
	</body>
</html>

3.增加边框

原理：给按钮增加点击事件，当被点击的时候就将img的标签样式改变，给大家举例了三种实现方式，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //编辑样式，采用类选择器
    <style>
        .a{
            border: 10px solid green;//设置边框
            box-shadow: 0px 0px 10px yellow;//设置阴影
        }
    </style>
</head>
<body>
<img id="img1" src="img/1.gif" alt="">
<img id="img2" src="img/2.gif" alt="">
<img id="img3" src="img/3.gif" alt="">
<p>
//设置点击按钮，增加点击事件
    <button onclick="fn1()">点我添加边框</button>
    <button onclick="fn2()">点我添加边框</button>
    <button onclick="fn3()">点我添加边框</button>
</p>
<script>
//创建函数
    function fn1() {
        //操作css的第一种方式:  直接操作style
        m1.style.border="5px solid black"//设置边框
        m1.style.width="40px"//设置宽度
        m1.style.opacity=.5//设置透明度
    }

    function fn2(){
        m2.setAttribute("class","a")//使用类选择器
    }

    function fn3(){
        //class是关键字
        //标签中的class属性在js中都叫做className
        m3.className="a"
    }
</script>
</body>
</html>

今天的分享到此为止，下期给大家带来更多精彩案例！