JavaScript快速入门 JS与CSS的交互

最新推荐文章于 2023-04-07 00:47:20 发布

KYA_知源

最新推荐文章于 2023-04-07 00:47:20 发布

阅读量571

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/KYA_ZXY/article/details/124776078

版权

本文介绍了JavaScript如何获取和设置CSS样式，包括行内样式和非行内样式获取方法，以及针对IE和非IE浏览器的不同实现。同时讲解了JavaScript中的offset、scroll、client系列属性以及event事件对象的相关知识，提供了多个实战案例，如获取鼠标指针坐标和实现滚动效果。

摘要由CSDN通过智能技术生成

一、JS获取与CSS交互
问题:
（1）CSS样式有三种类型：行内样式、内部样式和外部样式
（2）JavaScript获取CSS样式时分为两种情况：行内样式获取法和非行内样式获取法。

1.1 行内样式
通过element.style.attr（元素.style.属性）即可获取可设置

1.2 非行内样式
获取法，因浏览器的不同又分为两种，即基于IE浏览器的和非IE浏览器的如谷歌火狐等。
基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]
【注意事项】非行内样式获取法，只能获取不能设置。

函数封装，方便多次调用：兼容所有的浏览器，包括IE6 7

1.3 案例大全
（1）实现鼠标移入移除改变图片的边框颜色----导航效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px}
		ul{list-style: none}
		#oDiv{
			margin: 0 auto;
			width: 80%;
		}
		ul li{
			float: left
		}
		ul li a{
			display: inline-block;
			width: 103px;
			height: 30px;
			text-decoration: none;
			background-image: url('img/bg1.gif');
			margin-left: 1px;
			font-size: 12px;
			text-align: center;
			line-height: 30px;
			color: white;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var aa = document.getElementsByTagName("a");
			for(var i = 0;i<aa.length;i++){
				aa[i].onmouseover = function(){
					this.style.color = 'yellow';
					this.style.backgroundImage = 'url(img/bg2.gif)';
				};
 
				aa[i].onmouseout = function(){
					this.style.color = 'white';
					this.style.backgroundImage = 'url(img/bg1.gif)';
				};
			}
		};
	</script>
</head>
<body>
	<div id="oDiv">
		<ul>
			<li><a href ="">我的空间</a></li>
			<li><a href ="">我的照片</a></li>
			<li><a href ="">我的说说</a></li>
			<li><a href ="">我的日志</a></li>
			<li><a href ="">我的朋友</a></li>
		</ul>
	</div>
</body>
</html>

二、JavaScript 特效之四大家族（offset/scroll/client/event）

三大系列：offset、scroll、client
事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）
2.1 offset 系列
offset：偏移量,使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
a.获得元素距离带有定位父元素的位置
b.获得元素自身的大小（宽度高度）

（1） offsetWidth 和 offsetHeight （检测盒子自身宽高+padding+border）
** offsetWidth = width + padding + border;
** offsetHeight = Height + padding + border;

（2） offsetLeft 和 offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。
如果父级都没有定位则以 body 为准。
offsetLeft 从父级的 padding 开始算，父级的 border 不算。
在父盒子有定位的情况下，offsetLeft == style.left (去掉px)

（3） offsetLeft 和 style.left 区别

① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.left不可以。
② offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。
③ offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
④ 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
（style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）

2.2 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

（1）clientWidth 和 clientHeight