JavaScript 快速入门之第五章 JS与CSS交互

最新推荐文章于 2023-03-13 11:20:13 发布
最新推荐文章于 2023-03-13 11:20:13 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61313896/article/details/123613202
版权

一：css样式的类型：

  • 行内样式:结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

  • 例：<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

  • 内部样式:写在HTML页面内部，存放于head标记当中，样式写在style标记内。

  • 例：<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

  • 外部样式：写在css文件内

二：js获取css样式的方式：

  • 行内样式获取法 

  • 通过element.style.attr（元素.style.属性）即可获取可设置

  • style属性在获取值时，只能获取行内样式的值

  • 非行内样式获取法

  • 因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。

  1. 基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']

  2.  基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]

    注意：非行内样式获取法，只能获取不能设置。

三：浏览器的兼容性问题解决方法：

  • 设置一个函数，封装方法，兼容所有的浏览器，方便多次调用

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

​

  • 案例：鼠标移入移除改变图片的边框颜色

<!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(){				
					this.className = "over";
				};
				oImgs[i].onmouseout = function(){
					this.className = "out";
				};
			}
		};

	</script>
</head>
<body>
	<!-- 
		需求：鼠标移入img 显示边框颜色红色，移出显示边框黄色  默认黄色
	 -->

	<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;
		}
	</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 特效之四大家族    

  1. 三大系列：offset、scroll、client

  2. 事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）

  • offset 系列

  • 偏移量  得到标签的大小以及标签距离网页两端的间距。      

  • 作用： 

  1.  获得元素距离带有定位父元素的位置(offsetLeft/offsetTop)

  2.  获得元素自身的大小（宽度高度）

  • 属性方法： 

  • offsetWidth|offsetHeight  宽度：width+边框+内填充( 获得元素自身的大小（宽度高度) ) 

  • offsetParent (获取指定元素的父级元素对象，如果父级对象没有定位直接指向body)

问题：style属性：只能调用行内样式，若要获取非行内式样式的属性，应该怎么办？

解决办法：通过currentStyle或者getComputedStyle解决非行内式样式的获取

  • 案例：演示offset 系列的属性方法

<!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;
			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);
	
			//获取指定元素的父级元素对象，如果父级对象没有定位直接指向body
			console.log(oDiv.offsetParent);

			//获取被滚动条滚去的距离
			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
			};
		}

	</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>

  • client 系列    

  • 客户端  得到屏幕的可视区宽度和高度

  • 作用：

  • 可以动态的得到该元素的边框大小、元素大小等

  • 属性方法：

  1. clientWidth：获取网页可视区域宽度

  2. clientHeight：获取网页可视区域高度

  3. clientX：鼠标距离可视区域左侧距离

  4. clientY：鼠标距离可视区域上侧距离

  5. clientTop / clientLeft  ：   获取盒子的 border 宽高           

  • 案例：演示 client系列的属性方法

<!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;
			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");
			
			//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 指的时当前屏幕的可视区高度
			
		}


		/**
		 * 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>
	<div id="oDiv">
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容
		我是内容

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

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

  • Scroll 系列

  • 滚动的 可以动态的得到该元素的大小、滚动距离等

  • 属性方法：

  • ScrollWidth 和 scrollHeight

  •  检测盒子的宽高（不包括border）

  • 盒子内容的宽高（不包括border）

  • scrollTop / scrollLeft

  • 网页，被浏览器遮挡的头部和左边部分，被卷去的头部和左边部分。

  • 兼容性问题解决方法：

  1. ① 未声明 DTD 时（谷歌只认识他）

  2. document.body.scrollTop

  3. ② 已经声明DTD 时（IE678只认识他）

  4.  document.documentElement.scrollTop

  5.  ③ 火狐/谷歌/ie9+以上支持的

  6. window.pageYOffset

  • 案例：演示 Scroll系列的属性方法

<!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>

五：三大家族区别

  •  Width 和 height

  1. clientWidth  = width  + padding

  2. clientHeight  = height + padding

  3. offsetWidth  = width  + padding + border

  4. offsetHeight  = height + padding + border

  5. scrollWidth   = 内容宽度（不包含border）

  6. scrollHeight  = 内容高度（不包含border）

  • top 和 left

  1. offsetTop/offsetLeft ：

  2. 调用者：任意元素。(盒子为主)

  3. 作用：距离父系盒子中带有定位的距离。

  4. scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

  5. 调用者：document.body.scrollTop/.....(window)

  6.  作用：浏览器无法显示的部分（被卷去的部分）

  7. clientY/clientX:（clientTop/clientLeft 值的是border）

  8. 调用者：event.clientX(event)

  9. 作用：鼠标距离浏览器可视区域的距离（左、上） 

渊婉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端开发第4季：JavaScript基础入门
06-14
JavaScript是一种网页交互语言，为网页增添了巨大的表现力和交互能力，极大提高了用户体验，如今很难在找到不使用JavaScript的网站了。本课程主要是为刚刚接触JavaScript的朋友准备，详细的讲解了JavaScript的基本...
javascript入门笔记
05-15
允许让 JS 与 浏览器进行交互 JS是一款基于对象的编程语言 2、JS的基础语法 1、浏览器内核 内核负责页面内容的渲染，由以下两部分组成： 1、内容排版引擎 - 解析HTML/CSS 2、脚本解释引擎 - 解析Javascript ...
javascript(js与css交互）
weixin_64549900的博客
03-09 768
<table border="1" cellpadding="0" cellspacing="0" width="60%" > <tr> <td><input id="all" type="checkbox">全选</td> <td><input onclick="myCheck(this,'01',4,6);" type="checkbox">1月</td> <td>.
JS和CSS的交互
无法自律的人的博客
03-12 674
主写的是js与css怎么样去交互，有什么样式和方法。 最后面也写了四大系列 接触编程语言第一次发布作品见谅
JavaScript.05.JS和CSS的交互
yifei_345678的博客
03-04 579
前言 本期文章相比之前的文章简单， 使用CSS更改标签样式 1.什么是CSS CSS英文全称：Cascading Style Sheets，即层叠样式表，也叫级联样式表。 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 ..
JS与CSS交互
TestXzing的博客
03-13 314
JavaScript和CSS交互
JavaScript结合html,css的简单小例子
hello_cmy的博客
09-20 1063
先看效果： <html> <head> <meta charset="utf-8"> <style> table { border-collapse: collapse; } td { border...
todolist:使用React.js，Javascript，CSS3和HTML5之类的待办事项清单应用程序学习react.js组件和道具及其功能的基础知识
05-28
我的第一个应用程序使用：＃React.js #JSX #Javascript＃HTML5＃CSS3了解有关组件和道具以及状态值的更多信息Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下...
js+css在交互上的应用
12-11
但灵活应用CSS会有给人眼前一亮的感觉！ 以下用一个简单的例子来阐述我想说的。 CSS代码： 代码如下: #nav li ul { display:none; } HTML代码： 代码如下: <div id=”nav”> <ul class=””> <li> <h3>菜单1</h3> <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> <li>子菜单4</li> </ul> </li> <li> <h3>菜单2</h3> <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> <li>子菜单4</li> <l
CSS与JS结合：年轻人的第一个插件
ShixunOnline的博客
02-11 556
一、JS封装插件 通用目录结构： css插件依赖的基础css文件 js插件核心代码文件 demo.html提供给使用者的测试用例 CSS 加载器作为插件使用，需要有一个固定的父级，所以添加 dount-wrapper JS 本次封装使用的是“闭包模式” HTML ➩通常在HTML文件顶部引入CSS文件 ➩在文件末尾引入JS文件，是为了确保DOM元素加载完毕后再执行JS文件 二、JQuer...
原生JavaScript实现动态引入外部JS和CSS文件
HerryDong的博客
01-17 2750
先来说一下背景：由于公司产品需要给多个国家和地区的用户使用，因此我们做的产品是多语言版的。之前有个模块是用easyui做的，众所周知，easyui的部分控件显示的是英文，如下图所示： 如果想要显示中文的话，需要引入相应的中文包。如下图所示： 由于现在需要根据语言环境确定是否需要引入中文包，因此必须动态引入外部的js和css文件。我在这里做了一个demo，login.html可以让用户选择语言环...
5种JavaScript和CSS交互的方法
qq_25178609的博客
05-04 704
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终它们都属于网页前端技术，它们需要相互密切 的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！用JavaScript获取伪元素(pseudo-element)属性
JavaScript和CSS的交互
qq_1114382703的博客
03-05 648
使用js操作css
5种你未必知道的JavaScript和CSS交互的方法
like68的专栏
04-01 717
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！ 用JavaScript获取伪元素(pseudo-element)属性
JS和CSS交互的方法
weixin_33810302的博客
09-18 97
用JavaScript获取伪元素(pseudo-element)属性 var color=window.getComputedStyle( 　　document.querySelector('.element'),'bafora' ).getPropertyValue('color'); var content = window.getComputedStyle( 　　documen...
CSS和HTML结合方式有几种方式？js的基本语法，方法的使用还有js和HTML的结合方式有哪些?
superliug的博客
08-10 448
CSS和HTML的结合方式还有js的具体使用 CSS和HTML的结合方式 在html的标签上提供了一个属性,style=“css的代码” 在html中提供了一个标签 的内部。大小写没有问题。注意必须有; 引入外部文件的另一种方式： 放在head之间，不用放在第一种结合： 第二种结合： 第三种 结合： 第四种结合： css的属性的注意事项 type="text/css"为css的一般的类型...
javascript快速入门
最新发布
05-11
JavaScript是一种动态编程语言，主要用于在Web浏览器中创建动态效果和交互式用户界面。下面是一些快速入门的步骤： 1. 了解基础语法。JavaScript有自己的语法，包括变量声明、条件语句、循环语句、函数等。可以在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值