Js与CSS的交互

最新推荐文章于 2023-03-13 11:20:13 发布

赤诚&

最新推荐文章于 2023-03-13 11:20:13 发布

阅读量534

点赞数 7

分类专栏： HTML学习文章标签： oracle 数据库 sqlserver

本文链接：https://blog.csdn.net/weixin_67150631/article/details/123281382

版权

HTML学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS操作

一，样式

样式即是css，也就是网页的模样，色彩美学的搭配。样式表的基本语法，ID选择器，类选择器，标签选择器
样式1

样式2

二，style属性

style即是HTML的css标签，可在内设置元素的样式

<style type="text/css">
    body{
	font-size:12px;	
	line-height:20px;
	}
   .video{
	margin: 3px;
	float: left;
	}
</style>

常见属性如下
style1

style2

获取行内样式的方法

document.getElementById(elementId).//样式属性值
//格式
var divObj=document.getElementById("test");
var objTop=divObj.style.top;

获取类样式的方法

//currentStyle
//getComputedStyle()
//格式
var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;

三，JavaScript中的事件列表

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

四，网页滚动属性

属性	描述
scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
导clientWidth	浏览器中可见内容的宽度，不包括滚动条等边线，会随窗口的显示大小改变
clientHeight	浏览器中可以看到内容的区域的高度

//网页的三维：x,y,z
//层的浮动：position:absolute;
//绝对布局
	top:20px;
	left:20px;
	right:20px;
	bottom:20px;

五，悬浮广告的简易制作

<head>
	<meta charset="UTF-8">
	<title>悬浮广告的简易制作</title>
	<style>
		div {
			//设置边框和颜色
			border: 2px solid mediumturquoise;
			position: absolute; //使用绝对布局
			//设置位置
			top: 40px;
			right: 20px;
			transition: 1s;
			//设置下滑时间
		}
	</style>
</head>
<body>
	<div id="ad">
		<button onclick="ad.style.display='none'" id="btn">X</button>
		<br>
		<!-- src为你所放图片路径 -->
		<img src="img/a3.jpg" width="200px" height="200px">
	</div>
	<p>——————————————网页内容——————————</p>
	<p>——————————————网页内容——————————</p>
	<p>——————————————网页内容——————————</p>
	<p>——————————————网页内容——————————</p>
	<p>——————————————网页内容——————————</p>
	//此处省略N
	<script>
		//窗口的滑动事件
		window.onscroll = () => {
			//获取到窗口滚动的距离 scrollTop
		ad.style.top = 40 + document.documentElement.scrollTop + "px"
		}
	</script>
</body>

六，图片放大展示

<head>
		<meta charset="utf-8">
		<title>图片放大展示</title>
		<style type="text/css">
			div{
				width: 500px;
				height: 500px;
				position: absolute;
				pointer-events: none;
				display: none;
			}
		</style>
	</head>
	<body>
		<img src="img/a3.jpg" id="i1" width="250px" height="250px">
		<div id="div">
		</div>
		
		<script type="text/javascript">
		< -- 移入显示-->
			i1.onmouseover = function() {
					div.style.display = "block";
				} 
				<--移出不显示-->
			i1.onmouseout = function() {
				div.style.display = "none";
			}
			
			i1.onmousemove = (e) => {
				//需要事件对象 Event
				div.style.left = e.clientX - 50 + "px"
				div.style.top = e.clientY - 50 + "px"
				div.style.background = "url(" + i1.src + ") center/cover"
			}
		</script>
	</body>