JavaScript和css的交互

最新推荐文章于 2024-05-09 22:46:56 发布

時宜

最新推荐文章于 2024-05-09 22:46:56 发布

阅读量715

点赞数 11

文章标签： css javascript 交互

本文链接：https://blog.csdn.net/weixin_62270300/article/details/123273946

版权

样式表回顾

1.样式表的三种选择器

标签选择器

代码示例如下：

<style>
input{
width:120px;
border:solid 1px #ff0000;
}
</style>

Id选择器

代码示例如下：

<style>
#flow{
color:#ff0000
}
</style>

类选择器

代码示例如下：

<style>
.center{
text-align:center;
font-weight:bold;
}
</style>

2.样式常见属性

类别	属性	描述
边框属性	border	设置四个边框所有的属性
	border-width	设置边框的高度
	border-style	设置边框的样式
	border-color	设置边框的颜色
边界属性	margin	设置所有外边框属性
边界属性	margin-left margin-right margin-top margin-bottom	分别设置元素的左、右、上、下外边距
填充属性	padding	设置元素的所有内边距
填充属性	padding-left padding-right padding-top padding-bottom	分别设置元素的左、右、上、下内边距
文本属性	font-size	字体大小
	font-family	字体类型
	font-style	字体样式
	color	设置或检索文本的颜色
	text-align	文本对齐
	line-height	行高
背景属性	background-color	设置背景颜色
	background-image	设置背景图像
	background-repeat	设置一个指定的图像如何被重复

3.样式表

内部样式表

在<head>与</head>标签之间的style样式

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

外部样式表

使用<link>标签链接到外部样式文件
使用@import方法导入外部样式表

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

案例1：动态改变图片的边框样式

要求：根据不同按钮点击出现不一样的边框效果

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				border: 10px solid peachpuff;
				box-shadow: 0px 0px 10px aliceblue;//阴影
				
			}
			.b{
				border-radius: 20px;//弧度
				border: 10px solid lightcoral;
				box-shadow: 0px 0px 10px aliceblue;//阴影
			}
		</style>
	</head>
	<body>
		<img id="m1" src="img/book2.jpg"  width="100" height="100">
		<img id="m2" src="img/top1.jpg" width="100" height="100">
		<img id="m3" src="img/a1.jpg" width="100" height="100">
     <p>
	  <button type="button" onclick="fn1()">点我添加边框1</button>
	  <button type="button" onclick="fn2()">点我添加边框2</button>
	  <button type="button" onclick="fn3()">点我添加边框3</button>
     </p>
	 <script type="text/javascript">
	 	function fn1(){
			//操作css的第一种方式 :直接操作style
			m1.style.border="2px solid black"
			m1.style.width="150px"//调整图片宽度
			m1.style.opacity=.5//透明度
		}
		
		function fn2(){
			m2.setAttribute("class","a")
		}
		
		function fn3(){
			//class是关键字 标签中的class属性在js中都叫能className
			m3.className="b"
		}
	 </script>
	</body>
</html>

效果图如下：

案例2：随鼠标滚动的广告图片

要求：当鼠标上下滚动的时候，页面里面的小广告会跟着鼠标上下滚动

案例需要使用的新方法如下（window对象函数）:

属性	描述
scrollTop	设置或获取元素中滚动条的垂直偏移话题
scrollLeft	设置或获取元素中滚动条左右偏移距离
clientWidth	浏览器中可见内容的高度，不包括滚动条等边线，会随窗口的显示大小变化
clientHeigth	浏览器中可以看到内容的区域的高度

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid black;
            /*绝对布局的特点：可以随便调整位置*/
            position: absolute;
            /*top bottom left right*/
            right: 20px;
            top: 40px;
            transition: .1s;
        }
    </style>
</head>
<body>
<div id="ad">
    <button onclick="ad.style.display='none'">x</button>
    <br>
    <img src="img/top1.jpg" alt=""width="100" height="100" >
</div>
<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
	<p>淘宝，淘你所爱</p>
<script>
    //窗口的滑动事件
    window.onscroll=()=> {
        //获取到窗口滚动的距离 scrollTop
        ad.style.top=40+document.documentElement.scrollTop+"px"
    }
</script>
</body>
</html>

注：如果要小广告图片浮在文字上那么需要设置小广告图片在其div的位置属性position设置绝对定位absolute

onscroll事件：当页面滚动条的时候触发通过window对象来调用

效果图如下：

案例3：图片放大镜效果

要求：鼠标移入图片时出现放大图片

需要用到的方法如下

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			div{
				width: 250px;
				height: 250px;
				background: #FFDAB9;
				position: absolute;
	}
		</style>
	</head>
	<body>
		<img id="m1" src="images/show5_big.jpg" width="150" height="150" >
		<div id="div"></div>
		<script type="text/javascript">
			//onclick 点击事件
			//ondblclick 双击事件
			//onmouseover 鼠标移入事件
			//onmouseout 鼠标移出事件
			//onmousemove 鼠标移出事件
       
			m1.onmouseover=function(){//鼠标移入
				div.style.display="block"
			}
			m1.onmouseout=function(){//鼠标移出
				div.style.display="none"
			}
			m1.onmousemove=(e)=>{
				//需要事件对象 Event
				div.style.left=e.clientX-50+"px"//拿到位置后让鼠标在图片上居中
				div.style.top=e.clientY-50+"px"
				div.style.background="url("+m1.src+") center/cover" //放大的tupian
		}
		</script>
	</body>
</html>

效果图如下：

总结：

以上就是关于JavaScript和css的交互的一些内容之后还会跟新更多关于JavaScript的内容

欢迎大家关注！！！

時宜

关注

11
点赞
踩
1

收藏

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

目录样式表回顾1.样式表的三种选择器标签选择器Id选择器类选择器2.样式常见属性3.样式表内部样式表外部样式表案例1：动态改变图片的边框样式案例2：随鼠标滚动的广告图片案例3：图片放大镜效果总结：样式表回顾1.样式表的三种选择器标签选择器代码示例如下：<style>input{width:120px;border:solid 1px #ff0000;}</style> Id选择器.
复制链接

扫一扫