JS与CSS交互及JavaScript 特效之四大家族

一、JS获取与CSS交互

    问题:
    (1)CSS样式有三种类型:行内样式、内部样式和外部样式
    (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			border:5px solid yellow;
			/*display: block;*/
		}
		.over{
			border:5px solid red;
		}
		.out{
			border:5px solid yellow;
		}
	</style>

	<script type="text/javascript">
		window.onload = function(){
			var oImgs = document.getElementsByTagName("img");
			for(var i = 0;i<oImgs.length;i++){
				oImgs[i].onmouseover = function(){
					// style属性设置
					// style属性在获取值时,只能获取行内样式的值
					// this.style.border = "5px solid red";
					// className
					this.className = "over";
					console.log(this.style.display);
				};
				oImgs[i].onmouseout = function(){
					// this.style.border = "5px solid yellow";
					// 
					this.className = "out";
				};
			}
		};

	</script>
</head>
<body>
	<!--    js与css的交互 -->
	<!-- 通过js的方式对页面上的标签进行样式设置
		1.通过style属性进行设置
		2.通过className属性进行设置
		需求:鼠标移入img 显示边框颜色红色,移出显示边框黄色  默认黄色
	 -->
	<!-- <img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/1.jpg" alt="" width="200" height="200">
	<img  onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/2.jpg" alt="" width="200" height="200">
	<img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'" src="img/3.jpg" alt="" width="200" height="200">
	<img  onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/4.jpg" alt="" width="200" height="200"> -->

	<img style = "display: block;" src="img/1.jpg" alt="" width="200" height="200">
	<img src="img/2.jpg" alt="" width="200" height="200">
	<img src="img/3.jpg" alt="" width="200" height="200">
	<img src="img/4.jpg" alt="" width="200" height="200">

</body>
</html>

   导航条设置:

<!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;
		}
    	/*css样式*/
		/*ul li a:hover{
			color: yellow;
			background-image: url('img/bg2.gif');
		}*/
	</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>

    1.2 非行内样式获取法,因浏览器的不同又分为两种,即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。


        基于IE浏览器的非行内获取法:通过 element.currentStyle['attr']
        基于非IE如火狐谷歌等非行内获取法:通过 getComputedStyle(element.null/伪类)[attr]

     
    【注意事项】非行内样式获取法,只能获取不能设置。

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

    function getStyle(obj, name) { //obj:操作哪一个标签 name:该标签的属性
             if (obj.currentStyle) { //兼容IE
                return obj.currentStyle[name];
            } else { //兼容非IE浏览器---谷歌  火狐等等
               return getComputedStyle(obj, false)[name];
            }
       }


    
   

 
二、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在等号的左边和右边还不一样。左边的时候是属性,右边的时候是值。)
          

           //获取div标签距离父标签的距离。
 			console.log(oDiv.offsetLeft);
			console.log(oDiv.offsetTop);
			// offsetWidth|offsetHeight  宽度:width+边框+内填充
			console.log(oDiv.offsetWidth);
			console.log(oDiv.offsetHeight);
			// style属性:只能调用行内样式
			console.log(oDiv.style.width);
		
			//通过currentStyle或者getComputedStyle解决非行内式样式的获取
			var width = getStyle(oDiv,"width");
			console.log(width);

 

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

        (1)clientWidth 和 clientHeight
            clientWidth:获取网页可视区域宽度(两种用法)
            clientHeight:获取网页可视区域高度(两种用法)

            调用者不同,意义不同:
            盒子调用,指盒子本身;body/html调用,指可视区域大小。 
 
        (2)clientX 和 clientY
            clientX:鼠标距离可视区域左侧距离(event调用)
            clientY:鼠标距离可视区域上侧距离(event调用)

 
        (3) clientTop 和 clientLeft  
                获取盒子的 border 宽高
                
        (4)获取屏幕的可视区
            var width = (document.documentElement.clientWidth || document.body.clientWidth)
            var height = (document.documentElement.clientHeight || document.body.clientHeight)

             
                

            //获取指定元素的父级元素对象,如果父级对象没有定位直接指向body
			console.log(oDiv.offsetParent);
			console.log("-------------------------------------------------");
			//clientTop获取上边框的大小
			console.log(oDiv.clientTop);
			//clientLeft获取左边框的大小
			console.log(oDiv.clientLeft);
			//获取指定元素的宽度(width+内填充)
			console.log(oDiv.clientWidth);
			//获取指定元素的宽度(width+内填充)
			console.log(oDiv.clientHeight);//200


                
                
    2.3 Scroll 系列
        scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。


        (1)ScrollWidth 和 scrollHeight(不包括border)
            检测盒子的宽高。(调用者:节点元素。属性。)
            盒子内容的宽高。(如果有内容超出了,显示内容的高度)
            IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
         
        (2)scrollTop 和 scrollLeft
            网页,被浏览器遮挡的头部和左边部分。
            被卷去的头部和左边部分。
         
        (3)有兼容性问题
            ① 未声明 DTD 时(谷歌只认识他)
            document.body.scrollTop
            ② 已经声明DTD 时(IE678只认识他)
            document.documentElement.scrollTop
            ③ 火狐/谷歌/ie9+以上支持的
            window.pageYOffset
        
        (4var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;  
             var top = document.documentElement.scrollTop + document.body.scrollTop;  
             

	       //获取被滚动条滚去的距离
	 		window.onscroll = function(){
				var scrollDemo = scroll();
				console.log(scrollDemo.left)
				console.log(scrollDemo.top)
			};

			//div的实际高度
			console.log("width: "+oDiv.scrollHeight);
			console.log("width: "+oDiv.scrollWidth);

 
    2.4 event 事件对象
    (1)概述
        在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息
        所有浏览器都支持event对象,但支持的方式不同。
        比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
        普通浏览器支持 event(带参,任意参数)
        ie 678 支持 window.event(无参,内置)
        
        总结:他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
 
    (2) 事件对象 event 的获取
        IE678中,window.event 
        
        在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
        Box.onclick = function (aaa){   aaa就是event     }

 
    (3) 兼容获取方式有两种:
        不写参数直接使用event;
        写参数,但是参数为event
        var event  = event || window.event;(主要用这种)
 

  
    (4) screenX、pageX 和 clientX 的区别
        pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
        pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
        clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
 

    (5) pageY 和 pageX 的兼容写法
        在页面的位置 = 看得见的 + 看不见的
        pageY/pageX=event.clientY/clientX+scroll().top/scroll().left 

案例一:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		div{
			width: 200px;
			height: 200px;
			/*margin-top: 300px;
			margin-left: 200px;*/
			background-color: red;
			border: 10px solid yellow;
			padding-left:10px;
			position: relative;
			top: 200px;
			left: 200px;
			overflow: auto;
		}
	</style>

	<script type="text/javascript">
		//方法:获取样式
		function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性
		    if(obj.currentStyle){//兼容IE
				return obj.currentStyle[name];
		    }else{//兼容非IE浏览器---谷歌  火狐等等
				return getComputedStyle(obj,false)[name];
		    }
		}

		window.onload = function(){
			var oDiv = document.getElementById("oDiv");
			//获取div标签距离父标签的距离。
			console.log(oDiv.offsetLeft);
			console.log(oDiv.offsetTop);
			// offsetWidth|offsetHeight  宽度:width+边框+内填充
			console.log(oDiv.offsetWidth);
			console.log(oDiv.offsetHeight);
			// style属性:只能调用行内样式
			console.log(oDiv.style.width);
		
			//通过currentStyle或者getComputedStyle解决非行内式样式的获取
			var width = getStyle(oDiv,"width");
			console.log(width);

			//获取指定元素的父级元素对象,如果父级对象没有定位直接指向body
			console.log(oDiv.offsetParent);
			console.log("-------------------------------------------------");
			//clientTop获取上边框的大小
			console.log(oDiv.clientTop);
			//clientLeft获取左边框的大小
			console.log(oDiv.clientLeft);
			//获取指定元素的宽度(width+内填充)
			console.log(oDiv.clientWidth);
			//获取指定元素的宽度(width+内填充)
			console.log(oDiv.clientHeight);//200

			var clientDemo = client();
			console.log(clientDemo.width);//800指的时当前屏幕的宽度
			console.log(clientDemo.height);//149 指的时当前屏幕的可视区高度


			console.log("--------------------------------------");
			//获取被滚动条滚去的距离
			window.onscroll = function(){
				var scrollDemo = scroll();
				console.log(scrollDemo.left)
				console.log(scrollDemo.top)
			};

			//div的实际高度
			console.log("width: "+oDiv.scrollHeight);
			console.log("width: "+oDiv.scrollWidth);
		}

		/**
		 * scroll()方法的封装
		 */
		function scroll() {
			//直接return一个json对象
			return {
				"left": window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
				"top": window.pageYOffset || document.documentElement.top || document.body.scrollTop
			};
		}


		/**
		 * client浏览器窗口可视区域兼容性
		 */
		function client() {
			if (window.innerWidth != null) // ie9 +  最新浏览器
			{
				return {
					width: window.innerWidth,
					height: window.innerHeight
				}
			} else if (document.compatMode === "CSS1Compat") // 标准浏览器
			{
				return {
					width: document.documentElement.clientWidth,
					height: document.documentElement.clientHeight
				}
			}
			return { // 怪异浏览器
				width: document.body.clientWidth,
				height: document.body.clientHeight

			}
		}
	</script>
</head>
<body>
	<script type="text/javascript">

		for(var i = 1;i<=1000;i++){
			document.write(i+"<br/>");
		}

	</script>
	<!-- 网页的特效四大家族之一 offset -->
	<!-- offset:偏移量  得到标签的大小以及标签距离网页两端的间距。 -->
	<!-- client:客户端  得到屏幕的可视区宽度和高度 -->
	<div id="oDiv">
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容

		我是内容
		我是内容
		我是内容

		我是内容
		我是内容
		我是内容
		我是内容
		我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
	</div>
</body>
</html>

案例二:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#oDiv{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			top: 100px;
			left:500px;
		}

	</style>
	<script type="text/javascript">

		//方法:获取非行内式样式
		function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性
		    if(obj.currentStyle){//兼容IE
				return obj.currentStyle[name];
		    }else{//兼容非IE浏览器---谷歌  火狐等等
				return getComputedStyle(obj,false)[name];
		    }
		}

		/**
		 * scroll()方法的封装
		 */
		function scroll() {
			//直接return一个json对象
			return {
				"left": window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
				"top": window.pageYOffset || document.documentElement.top || document.body.scrollTop
			};
		}
			window.onload = function(){
				//1.获取div盒子本身的宽度和高度
				var oDiv = document.getElementById("oDiv");
				//获取盒子本身的高度
				var height = oDiv.offsetHeight;
				// alert(height);
				//获取盒子距离父级元素的高度
				var top = getStyle(oDiv,"top");
				// alert(top);
				//设置滚动条的监听事件
				window.onscroll = function(){
					//得到滚动条滚去的距离
					var scrollDemo = scroll();
					// console.log(scrollDemo.top);
					
					//定义一个变量保存总距离
					var sum =  parseInt(top)+scrollDemo.top;
					console.log(sum);

					oDiv.style.top = sum+'px';
				};

			}

	</script>
</head>
<body>
	<script type="text/javascript">
		for(var i = 1;i<=1000;i++){
			document.write(i+"<br/>");
		}
	</script>
	<div id="oDiv">

	</div>
</body>
</html>

案例三:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#oDiv{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			top: 100px;
			left:0px;
			/*盒子的圆弧度*/
			border-radius: 100%;
		}
	</style>
	<script type="text/javascript">
		//方法:获取非行内式样式
		function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性
		    if(obj.currentStyle){//兼容IE
				return obj.currentStyle[name];
		    }else{//兼容非IE浏览器---谷歌  火狐等等
				return getComputedStyle(obj,false)[name];
		    }
		}
		/**
		 * client浏览器窗口可视区域兼容性
		 */
		function client() {
			if (window.innerWidth != null) // ie9 +  最新浏览器
			{
				return {
					width: window.innerWidth,
					height: window.innerHeight
				}
			} else if (document.compatMode === "CSS1Compat") // 标准浏览器
			{
				return {
					width: document.documentElement.clientWidth,
					height: document.documentElement.clientHeight
				}
			}
			return { // 怪异浏览器
				width: document.body.clientWidth,
				height: document.body.clientHeight

			}
		}
	window.onload = function(){
		var oDiv = document.getElementById("oDiv");
		var flag = true;
		var flag2 = true;
		window.setInterval(function(){
			var left = parseInt(getStyle(oDiv,"left"));
			var top = parseInt(getStyle(oDiv,"top"));

			var width = (document.documentElement.clientWidth || document.body.clientWidth)-oDiv.offsetWidth;

			var height = (document.documentElement.clientHeight || document.body.clientHeight)-oDiv.offsetHeight;
			
			if(flag == true){
				left+=5;
			}
			if(left >= width){
				flag = false;
			}
			if(flag == false){
				left-=5;
			}
			if(left<=0){
				flag=true;
			}

			if(flag2 == true){
				top+=5
			}
			if(top >= height){
				flag2 = false;
			}
			if(flag2 == false){
				top-=5;
			}
			if(top<=0){
				flag2=true;
			}
			oDiv.style.left = left+'px';
			oDiv.style.top = top+'px';

		},50);
	};
	</script>
</head>
<body>
	<div id="oDiv">

	</div>
</body>
</html>

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ning_ning_03

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值