javascript基础（样式的操作，浏览器兼容样式操作，其他的样式相关属性，滚动的样式）（三十）

最新推荐文章于 2024-09-18 10:06:00 发布
最新推荐文章于 2024-09-18 10:06:00 发布
阅读量258 收藏
点赞数
分类专栏： HTML5基础篇 文章标签： dom html javascript 经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010853130/article/details/55094545
版权

1.样式的操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				
				margin-top: 50px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，修改box1的样式
				 */
				
				//获取按钮和box1
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var box1 = document.getElementById("box1");
				
				//定义一个变量
				var l = 100;
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					
					/*
					 * 修改元素的样式
					 * 		语法：元素.style.样式名 = 样式值;
					 * 		注意样式名中带有-不能直接写
					 * 			像
					 * 				background-color
					 * 				border-width
					 * 				border-left-style
					 * 		- 这种带有-的样式名，需要将其修改为驼峰命名法，然后在操作
					 * 			将-去掉，然后将-后的字母改大写
					 * 			backgroundColor
					 * 			borderWidth
					 * 
					 * 		- 通过style修改的样式都是元素的内联样式，
					 * 			而内联样式的优先级最高的，所以我们通过JS修改的样式往往会立即显示
					 * 			但是如果在样式后添加了!important，则无法通过内联样式进行覆盖
					 * 			所以我们要尽量去避免使用!important
					 */
					
					l += 10;
					
					//修改box1的宽度
					box1.style.width = l + "px";
					box1.style.height = l + "px";
					
					//修改背景颜色为黄色
					box1.style.backgroundColor = "yellowgreen";
					
					
				};
				
				btn02.onclick = function(){
					
					
					/*
					 * 语法：
					 * 	元素.style.样式名
					 * 
					 * - 通过style只可以读取内联样式，不能读取样式表中的样式
					 * 		如果没有内联样式则不能读取
					 */
					
					//读取box1的样式
					alert(box1.style.backgroundColor);
					
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">修改样式</button>
		<button id="btn02">读取样式</button>
		
		<div id="box1"></div>
		
	</body>
</html>


2.浏览期兼容操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				height: 100px;
				background-color: red;
				width: 500px;
				margin-top: 50px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后，修改box1的样式
				 */
				
				//获取按钮和box1
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var box1 = document.getElementById("box1");
				
				
				//为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					
					/*
					 * 读取元素的当前生效的样式
					 * 	语法：元素.currentStyle.样式名
					 * 	
					 *  currentStyle只有IE浏览器支持，在其他的浏览器中不好使
					 */
					//alert(box1.currentStyle.width);
					
					/*
					 * 正常浏览器需要使用一个getComputedStyle()这个方法来获取当前的样式
					 * 	这个方法就是window的方法，可以直接使用
					 * 参数：
					 * 	  1.要获取样式的元素
					 * 	  2.要获取的元素的伪类，如果不需要可以传null
					 * 
					 * - 这个方法会返回一个对象，在这个对象中封装了元素的当前样式
					 * 
					 * - 注意此方法IE8及以下的浏览器不支持
					 * 
					 * - 通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改
					 * 		如果需要修改，则需要使用style。
					 * 
					 */
					
					//var st = getComputedStyle(box1 , null);
					
					//alert(st.width);
					//alert(getComputedStyle(box1 , null).width);
					
					
					//getComputedStyle(box1 , null).width = "300px";
					
					//alert(getComputedStyle(box1 , null).width);
					//alert(box1.currentStyle.width);
					
					alert(getStyle(box1 , "width"));
					
				};
				
			};
			
			/*
			 * getComputedStyle()适用于IE9及以上的浏览器
			 * currentStyle使用于IE8及以下的浏览器
			 * 为了可以兼容所有的浏览器，我们需要自定义一个函数，来获取元素的样式
			 */
			
			/*
			 * 用来获取任意元素的当前样式
			 * 	参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式的名字
			 * 
			 * 在读取元素的样式时，如果元素没有设置样式，
			 * 	则火狐、Chrome等浏览器会自动计算元素的样式值
			 * 	而IE浏览器，有使用不会自动计算，而是返回默认值，比如宽度会返回auto
			 * 		
			 */
			function getStyle(obj , name){
				
				//判断浏览器中是否含有getComputedStyle这个方法
				if(window.getComputedStyle){
					//支持正常的浏览器
					return getComputedStyle(obj,null)[name];
				}else{
					//只支持IE
					return obj.currentStyle[name];
				}
				
				//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
				
			}
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">读取样式</button>
		<button id="btn02">读取样式</button>
		
		<div id="box1" ></div>
		
	</body>
</html>


3.其他的样式相关属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 200px;
				height: 200px;
				background-color: silver;
				margin-top: 20px;
				
				/*设置边框*/
				/*border: 10px solid red;
				
				padding: 100px;*/
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取按钮和box1
				var btn01 = document.getElementById("btn01");
				var box1 = document.getElementById("box1");
				
				
				btn01.onclick = function(){
					
					/*
					 * clientWidth
					 * clientHeight
					 * 	- 获取元素的可见宽度和高度
					 * 	- 获取到的值包括元素的内容区和内边距
					 * 	- 这些属性都是只读，只能看不能修改
					 */
					
					//alert(box1.clientHeight);
					//box1.clientHeight = "500px" ;
					
					/*
					 * offsetWidth
					 * offsetHeight
					 * 	- 可以用来获取元素整个的可见框的大小
					 * 	- 它获取到的值，包括内容区、内边距和边框
					 */
					//alert(box1.offsetWidth);
					
					/*
					 * offsetParent
					 * 	- 可以返回当前元素的定位父元素
					 * 	- 定位父元素，指离当前元素最近的开启了定位的祖先元素
					 * 			如果所有的祖先元素都没有开启定位，则返回body
					 */
					var op = box1.offsetParent;
					
					//alert(op)
					
					/*
					 * offsetLeft（水平偏移量）
					 * offsetTop（垂直偏移量）
					 * 	- 获取当前元素相对于其定位父元素的偏移量
					 */
					
					//输出box1相对于其定位父元素的水平偏移量
					alert(box1.offsetTop);
					
					
				};
				
			};
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
		
		<div id="box3" style="width: 400px; height: 400px; background-color: skyblue;">
			<div id="box2" style="width: 300px; height: 300px; background-color: honeydew; ">
				<div id="box1"></div>
			</div>
		</div>
		
		
	</body>
</html>


4.滚动的样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: silver;
				
				overflow: auto;
			}
			
			#box2{
				width: 450px;
				height: 500px;
				background-color: #bfa;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取按钮和box1
				var btn01 = document.getElementById("btn01");
				var box1 = document.getElementById("box1");
				
				
				btn01.onclick = function(){
					
					//获取box1的高度
					//alert(box1.clientHeight);
					/*
					 * scrollHeight
					 * 	- 可以获取元素滚动区域的高度
					 * scrollWidth
					 * 	- 可以获取元素滚动区域的宽度
					 */
					//alert(box1.scrollWidth);
					
					/*
					 * scrollTop
					 * 	- 垂直滚动条滚动的距离
					 * scrollLeft
					 * 	- 水平滚动条滚动的距离
					 */
					//alert(box1.scrollLeft);
					
					//当 scrollHeight - scrollTop = clientHeight时，则说明垂直滚动条滚动到底了
					//当 scrollWidth - scrollLeft = clientWidth时，则说明水平滚动条滚动到底了
					//alert(box1.scrollHeight - box1.scrollTop);
					
				};
				
			};
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
		
		<br /><br />
		
		<div id="box1">
			<div id="box2"></div>
		</div>
		
		
	</body>
</html>


滚动的样式练习：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">
			#info{

				width: 200px;

				height: 400px;

				background-color: #bfa;

				overflow: auto;

			}

			
		</style>

		

		<script type="text/javascript">
			

			window.onload = function(){

				

				/*

				 * 当滚动条滚动到底时，使表单项可用

				 */

				

				//为p元素绑定一个滚动条滚动的事件

				var info = document.getElementById("info");

				

				//获取两个表单项

				var inputs = document.getElementsByTagName("input");

				

				/*

				 * onscroll

				 * 	- 滚动条滚动的事件，当元素的滚动条滚动时会触发

				 */

				info.onscroll = function(){

					

					//检查滚动条是否滚动到底

					if(this.clientHeight == this.scrollHeight - this.scrollTop){

						//当进入判断，则说明滚动条滚动到底了

						//使两个表单项变成可用状态

						//disabled属性用来设置表单项是否禁用

						//设置为true，表示禁用，设置为false表示可用

						inputs[0].disabled = false;
						inputs[1].disabled = false;

					}

					

				};

				

			};

			

			
		</script>

	</head>

	<body>

		

		<h3>亲爱的用户，欢迎注册</h3>

		<p id="info">

			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册
			请仔细阅读以下协议，如果你不同意，你就别注册

		</p>

		

		<!--

			如果在表单项中添加disabled="disabled"，则可以将表单项变成不可用的状态

		-->

		我已仔细阅读，同意协议 <input type="checkbox" disabled="disabled" />	

		<br /><br />

		<input type="submit" value="注册" disabled="disabled" />

	</body>

</html>


 

 

咸鸭蛋炒饭
关注
专栏目录
2009.12.29——只显示垂直滚动条，不显示水平的
01-07 152
2009.12.29——只显示垂直滚动条，不显示水平的 1.overflow,overflow-x,overflow-y overflow属性有四个值：visible （默认）， hidden， scroll， 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。 注意：auto和scroll的区别 scroll：不需要的...
关于js中读取元素样式时浏览器的兼容问题
qq_36681922的博客
07-20 570
首先，我们的目的是通过js函数来读取html中的内联元素样式 这里有两个方法去读取样式 1.alert（元素.currentStyle.样式名） 2.alert（getComputedStyle(要获取样式的元素，一般为null)） 但是注意，第一个方法只能在IE浏览器中使用，其他浏览器不支持。而第二个方法却不支持IE8及
JS来获取全局样式值—style，currentStyle，getComputedStyle() 并解决浏览器兼容性问题
一介白衣入江南
06-03 4253
一. style对象 style读取样式 语法：元素.style.样式名 还可以设置通过style属性设置的样式 语法：元素.style.样式=样式值 注意： 如果Css的样式值含有-， 这种名称在JS中是不合法的，比如background-color 我们在使用是要把这样的名称修改为驼峰命名法 去掉-，然后将-号后的字母大写 注意：通过style属性设置和读取的都是内联样式，无...
javascript操作内联样式和获取元素当前样式以及兼容性问题
qq_51649438的博客
04-03 2508
在使用dom操作内联样式和当前样式时，需要注意的问题很多 特别是浏览器的兼容性问题 首先是操作内联样式‘先来看看简单的例子代码 <script type="text/javascript"> window.onload=function(){ //点击按钮修改box1大小 //获取box1 var box1 = document.getElementById("box1");
DOM
openXu的专栏
04-18 1376
转载请标明出处： https://blog.csdn.net/xmxkf/article/details/79995020 本文出自:【openXu的博客】 1. 节点   节点Node是构成网页最基本的组成部分，网页中的每个部分都可以称为节点。比如html标签、属性、文本、注释、整个文档等都是节点，他们的具体类型不同。 文档节点：整个HTML文档 元素节点：HTM...
CSS3改变浏览器滚动条样式
11-21
需要注意的是，这些样式只适用于支持`-webkit-`前缀的浏览器，对于不支持的浏览器（如Firefox），可能需要使用其他方法或者JavaScript库来实现跨浏览器的兼容性。 总的来说，CSS3的滚动条样式定制功能为我们提供了...
纯css修改浏览器scrollbar滚动条样式示例
09-22
尽管存在浏览器兼容性问题，但随着Web技术的发展，未来可能有更多的标准化解决方案出现，使得滚动条样式定制变得更加容易和普遍。因此，了解和掌握这些CSS技巧对于前端开发者来说是十分必要的。
javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
12-01
总的来说，这段代码示例展示了如何用`for...in`遍历`currentStyle`以获取元素的样式信息，但要注意，对于滚动条样式的获取和修改，可能需要考虑浏览器兼容性问题，并可能需要结合CSS来实现。如果要定制滚动条样式，...
多种风格的浏览器滚动条样式
09-01
因此，为了实现全浏览器兼容，可能需要结合使用JavaScript插件和CSS。 总结起来，“多种风格的浏览器滚动条样式”不仅涉及到美观，更关乎用户体验。通过“malihu-custom-scrollbar-plugin-master”这样的插件和CSS...
元素未显示设置width/height时IE中无法使用currentStyle获取（默认为auto）
weixin_33979745的博客
09-05 227
我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高，那么使用该属性将获取不到，获取的值为auto。如下 &lt;div&gt;abcd&lt;/div&gt; &lt;script&gt; var div = document.getElementsByTagName('div')[0]; alert(div.currentSt...
js基础（样式）
weixin_30507269的博客
05-12 139
修改样式： /* * 通过JS修改元素的样式： * 语法：元素.style.样式名 = 样式值 * * 注意：如果CSS的样式名中含有-， * 这...
获取样式的时候用offsetWidth 这类有Bug 要用 obj.currentStyle.width 或getComputedStyle(obj,null).width
YOUAFR的博客
10-18 879
div{ width: 100px; height: 100px; background: red; float: left; margin: 20px; } 哈哈 window.onload = function(){ var oBox1 = document.getElementById('box1')
JavaScript-笔记14
wsssq_的博客
01-19 498
DOM与样式
JavaScript读取元素当前css样式——解决currentStyle不兼容问题
LiLi_code的博客
03-17 1032
注：style它只能获取到内联样式中的属性值；currentStyle它由于兼容性不好，是IE专属的用来获取CSS属性，但是谷歌和火狐都不支持；getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器 故，使用一个函数将其兼容性统一解决： var CurrentStyle = function (element) { return element.curr...
JS基础-获取当前元素的样式&&其他样式相关的属性
dweblover的博客
01-27 905
1.利用currentStyle方法来获取当前元素的样式 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;获取元素当前样式练习&lt;/title&gt; &lt;style type="text/css"&gt; #box1
在HTML中添加图片
Q18600000000的博客
09-15 528
标签中指定要显示的图像
网页打开时，下载的文件text/html/重定向类型有什么作用？
最新发布
2301_79698214的博客
09-18 1048
Text类型在数据库设计中的应用非常广泛，主要因为它能够满足存储大量文本数据的需要，而不会成为性能瓶颈，尽管其存储效率相对较低，特别是在进行大量的数据读取和写入操作时‌1。通过重定向，可以将旧的URL指向新的URL，确保用户和搜索引擎能够顺利访问到更新后的内容，同时防止因结构调整导致的404错误。总的来说，Text类型在数据库中的应用主要是为了存储大量的文本信息，无论是普通文本还是特定格式的文本数据，如HTML或JSON格式的内容，它都提供了灵活且高效的存储解决方案。综上所述，当网页打开时下载的。
HTML讲解（一）body部分
2301_80349538的博客
09-18 581
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做web 页面。
窗口框架frame(HTML前端)
qq_74861982的博客
09-15 1155
我们要在另一个网页中显示，此时我们就要设置默认打开的网页，也就是a标签的target属性，记得先对要显示的网页设置一个name,方便指定网页打开。4.此时找到frame.html在浏览器中预览效果如下，我们可以看到，一个网页分为左中右三个小的网页了，并且三个小的网页显示的东西不同。作用：将网页分割为多个HTML页面，即将窗口分为多个小窗口，每个小窗口可以显示不同的页面，但是在浏览器中是一个完整的页面。然后我们在左边那个网页插入两个超链接，一个是个人简历，一个是兴趣爱好。点击我的兴趣爱好，将出现如何内容。
JavaScript全方向无缝滚动代码实现(跨浏览器兼容)
本文将详细解释`boxmove`函数及其相关知识点，并提供相关的JavaScript滚动技术介绍。 1. **`boxmove`函数详解**: - `d1`: 外围容器，即需要滚动的元素的父容器，通常是一个div。 - `d2`: 内容，表示需要滚动的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

咸鸭蛋炒饭

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

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

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

打赏作者

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

抵扣说明：

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

余额充值