（11）使用DOM操作CSS

最新推荐文章于 2022-07-16 22:31:17 发布
最新推荐文章于 2022-07-16 22:31:17 发布
阅读量744 收藏
点赞数
分类专栏： JavaScript 文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_21/article/details/121238068
版权

（11）使用DOM操作CSS

1、DOM操作内联样式

  • 通过JS修改元素的样式
    语法：元素.style.样式名 = 样式值

  • 注意，如果CSS的样式名中含有-
    这种名称在JS中是不合法的，如background-color
    需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的首字母大写

  • 我们通过style属性设置的样式都是内联样式(在html结构标签中写的)
    而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
    但是如果在样式中写了!important,则此时样式会有最高的优先级
    即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
    所以尽量不要为样式添加!important

  • 通过style属性设置和读取的都是内联样式
    无法读取样式表中的样式

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width:200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//修改box1的大小
					/*
					 * 通过JS修改元素的样式
					 * 		语法：元素.style.样式名 = 样式值
					 * 
					 * 	注意，如果CSS的样式名中含有-
					 * 		这种名称在JS中是不合法的，如background-color
					 * 		需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的首字母大写
					 * 
					 * 我们通过style属性设置的样式都是内联样式(在html结构标签中写的)
					 * 		而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
					 * 		但是如果在样式中写了!important,则此时样式会有最高的优先级
					 * 		即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
					 * 		所以尽量不要为样式添加!important
					 * 
					 */
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
				}
				
				//点击按钮2，读取元素的样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//读取box1的样式
					/*
					 * 语法：元素.style.样式名
					 * 
					 * 通过style属性设置和读取的都是内联样式
					 * 		无法读取样式表中的样式
					 */
					alert(box1.style.backgroundColor);
				}
			};
			
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button>
		<button id="btn02">点我一下2</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

2、读取元素样式

  • 通过currentStyle和getComputedStyle()读取到的样式都是只读的
    不能修改，如果要修改必须通过Style属性

  • 获取元素的当前显示的样式
    语法： 元素.currentStyle.样式名;
    它可以用来读取当前元素正在显示的样式
    如果当前元素没有设置样式，则获取它的默认值

  • 获取元素的当前显示的样式
    语法： getComputedStyle(元素,null).样式名;
    这个方法是window的方法，可以直接使用
    需要两个参数：
    第一个：要获取样式的元素
    第二个：可以传递一个伪元素，一般都传null
    它可以用来读取当前元素正在显示的样式
    该方法会返回一个对象，对象中封装了当前元素对应的样式
    可以通过对象.样式名来读取样式
    比如：没有设置width，它不会获取到auto，而是一个长度
    但是该方法不支持IE及以下

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
			
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的
					 * 不能修改，如果要修改必须通过Style属性
					 */
					
					/*
					 * 获取元素的当前显示的样式
					 * 		语法： 元素.currentStyle.样式名;
					 * 		它可以用来读取当前元素正在显示的样式
					 * 		如果当前元素没有设置样式，则获取它的默认值
					 * 		currentStyle只支持IE浏览器，其他的浏览器不支持
					 */ 
					 //alert(box1.currentStyle.width);
					
					/*
					 * 获取元素的当前显示的样式
					 * 		语法： getComputedStyle(元素,null).样式名;
					 * 		这个方法是window的方法，可以直接使用
					 * 		需要两个参数：
					 * 			第一个：要获取样式的元素
					 * 			第二个：可以传递一个伪元素，一般都传null
					 * 		它可以用来读取当前元素正在显示的样式
					 * 		该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 		可以通过对象.样式名来读取样式
					 * 		如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 		比如：没有设置width，它不会获取到auto，而是一个长度
					 * 		但是该方法不支持IE及以下
					 */     
					var obj = getComputedStyle(box1,null);
					alert(obj.width);
				};
			};	
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button><br /><br />
		<div id="box2" style="position:relative;">
			<div id="box1"></div>
		</div>
	</body>
</html>

3、读取元素样式（不限浏览器类型

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
			
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){

					var w = getStyle(box1,"width");
				};
			};
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数
			 * 		obj： 要获取的样式的元素
			 * 		name：要获取的样式名
			 */
			function getStyle(obj,name){
				//方法一
				if(window.getComputedStyle){
					//正常浏览器方式
					return getComputedStyle(obj,null)[name];
				}else{
					//IE8方式
					return obj.currentStyle[name];
				}
				
				//方法二
//				if(obj.currentStyle){
//					//IE8方式
//					return obj.currentStyle[name];
//				}else{
//					//正常浏览器方式
//					return getComputedStyle(obj,null)[name];
//				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button><br /><br />
		<div id="box1"></div>
	</body>
</html>```

4、其他样式相关的属性

a、 clientWidth， clientHeight

这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距
这些属性都是不带px的，返回都是一个数字，可以直接进行计算
这些属性都是只读的，不能修改

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * clientWidth
					 * clientHeight
					 * - 这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距
					 * - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
					 * - 这些属性都是只读的，不能修改
					 */
					alert(box1.clientWidth);
					alert(box1.clientHeight);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

b、 offsetWidth， offsetHeight

获取元素的整个宽度和高度，包括内容区、内边距、边框

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetWidth
					 * offsetHeight
					 * - 获取元素的整个宽度和高度，包括内容区、内边距、边框
					 */
					alert(box1.offsetWidth);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

c、offsetParent

可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位（position不是static）的祖先元素
如果所有的祖先元素都没有开启定位，则返回body

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetParent
					 * - 可以用来获取当前元素的定位父元素
					 * - 会获取到离当前元素最近的开启了定位（position不是static）的祖先元素
					 * - 如果所有的祖先元素都没有开启定位，则返回body
					 */
					var op = box1.offsetParent;
					alert(op);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

d、offsetLeft，offsetTop

offsetLeft:当前元素相对于其定位父元素的水平偏移量；
offsetTop:当前元素相对于其定位父元素的垂直偏移量

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetLeft:当前元素相对于其定位父元素的水平偏移量
					 * offsetTop:当前元素相对于其定位父元素的垂直偏移量
					 */
					alert(box1.offsetLeft);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

e 、scrollWidth、scrollHeight

可以获取元素整个滚动区域德宽度和高度,即滚动区域内原子元素的高度和宽度

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box2{
				width:200px;
				height:200px;
				background-color: #bfa;
				overflow: auto;
			}
			#box3{
				width:150px;
				height:600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box2 = document.getElementById("box2");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * scrollWidth
					 * scrollHeight
					 * 可以获取元素整个滚动区域德宽度和高度,即滚动区域内原子元素的高度和宽度
					 */
					alert(box2.scrollHeight);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box2">
			<div id="box3"></div>
		</div>
	</body>
</html>

f、scrollLeft、scrollTop

可以获取水平滚动条和垂直滚动条移动的距离

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box2{
				width:200px;
				height:200px;
				background-color: #bfa;
				overflow: auto;
			}
			#box3{
				width:150px;
				height:600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box2 = document.getElementById("box2");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * scrollLeft：
					 * scrollTop
					 * 可以获取水平滚动条和垂直滚动条移动的距离
					 */
					alert(box2.scrollTop);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box2">
			<div id="box3"></div>
		</div>
	</body>
</html>

g、滚动条是否滚动到底验证

  • 当满足scrollHeight - scrollTop == clientHeight
    说明垂直滚动条滚动到底了
  • 当满足scrollWidth - scrollLeft == clientWidth
    说明水平滚动条滚动到底了

5、案例 （注册协议页面制作）

协议不阅读完，不能点下面的注册按钮

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
		 	#info{
		 		width: 250px;
		 		height:300px;
		 		overflow: auto;
		 	}	
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当垂直滚动条滚动到底时，表单可用
				 * onscroll
				 * - 该事件会在元素的滚动条滚动时触发
				 */
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//根据标签名获取表单项
				var inputs = document.getElementsByTagName("input");
				info.onscroll = function(){
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，表单项可用
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
					
				}
				
			};
			
			
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			协议正文，</br><!--[if IE]>
				
			<![endif]-->条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
		</p>
<!--		如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态-->
		<input type="checkbox" disabled="disabled"/>我已仔细阅读协议内容
		<input type="submit" value="注册" disabled="disabled"/>
	</body>
</html>

运行结果：
在这里插入图片描述

追星星の人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过DOM修改css的属性
xing_kai_kai的博客
07-13 626
通过JS修改元素的样式： 语法： 元素.style.样式名 = 样式值 注意： 如果CSS的样式名中含有-， 这种名称在JS中是不合法的比如background-color 需要将这种样式名修改为驼峰命名法， 去掉-，然后将-后的字母大写 我们通过style属性设置的样式都是内联样式， 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示 但是如果在样式中写了!important，则此时样式会有最高的优先级， 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效 所以尽量不要为样式添加!
HTML Dom与Css控制方法
09-05
随着Ajax技术的普及，DOM操作变得越来越重要，因为它允许网页在不刷新的情况下进行内容更新和样式变化，极大地提升了用户体验。许多大型网站，如百度、淘宝、腾讯等，都高度重视前端设计，DOM和CSS的熟练掌握成为了...
用dom操作CSS
weixin_45844109的博客
08-07 194
点击按钮，进行更改样式 如下图： 原始： 点击改变样式 更改样式的语法为: 元素.style.样式名=元素值 需要注意的地方：在更改样式的语法里，像这样background-color里面的“-”是不合法的，遇到这样的样式名，统一采用驼峰命名法 改成这样：backgroundColor 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用dom操作css&
CSS-DOM操作
weixin_34179968的博客
09-28 162
2019独角兽企业重金招聘Python工程师标准>>> ...
Jquery中的DOM操作 (九.css-DOM操作)
妖怪的博客
03-07 490
css-dom技术就是读取和设置style对象的各种属性. 1.css()获取,设置,批量设置,元素的样式属性 $("p").css("color")//获取p元素的样式颜色 $("p").css("color","red"))//设置p元素的样式颜色 $("p").css({"fontSize":"30px","backgroundColor":"#888888"})//设置p元素的字体大小
DOM操作Html 和 通过DOM对象改变CSS
一个半路出家的人
08-24 1552
DOM  文档对象模型 Document object Model 一,DOM操作HTML     1,改变HTML输出流:               注意:绝对不要在文档加载完车后使用document.write().这会覆盖掉该文档      2,寻找元素:             通过id找到HTML元素            通过标签名找到HTML元素    3,改变Htm...
jQuery常见面试题之DOM操作详析
12-10
DOM操作有三类：DOM-core、HTML-DOM 、CSS-DOM 一、插入节点 我们用的最多的就是append和apendTo，其实共有8种方法。 插入节点 二、删除节点 remove() ：删除节点，并删除元素节点绑定的事件。 empty() ：清空节点...
LightDarkMode:在页面上切换亮和暗模式。使用DOM操作访问CSS
03-18
总的来说，`LightDarkMode`是一个利用DOM操作和CSS来实现网页亮暗模式切换的功能，它提升了用户体验，同时展示了Web开发中的动态样式处理技巧。通过这样的实践，开发者不仅可以提高网站的易用性，还可以学习到关于...
jQuery DOM操作小结与实例
10-29
- CSS-DOM允许我们通过JavaScript操作CSS样式。通过`Element.style`属性，我们可以直接访问和修改元素的内联样式。例如，`Element.style.color = "red"`将改变元素的文字颜色为红色。 jQuery进一步优化了这些DOM...
jsstyle:使用 JavaScript 操作 CSS
07-13
在JavaScript中操作CSS，首先需要理解DOM（Document Object Model）。DOM是HTML或XML文档的结构化表示，允许程序和脚本动态更新、添加和删除页面内容。在jsstyle中，我们可以通过遍历CSS对象并将其应用到DOM元素上，...
JavaScript之DOM对CSS的操作
程序猿小九九的博客
02-11 381
读取内联样式，所有浏览器读取元素的当前样式，其他相关属性以及滚动的应用
dom操作css事件
Candycandyma的博客
04-16 193
DOM操作CSS 通过JS去修改元素的样式，语法：元素.style.样式名 = 样式值，样式值是一个字符串 如果样式名中含有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法。 注意： 1、通过style属性设置的样式都是内联样式，而内联样式具有较高的优先级，修改后立即执行。 2、但是如果在样式中写了 ！important，则此时样式会有最高的优先级，即时通过JS也不能覆盖该样式，此...
javascript(使用DOM操作CSS，其他样式操作的属性，事件）
m0_62520946的博客
07-16 743
目录使用DOM操作CSS获取元素当前样式其他样式操作的属性事件对象练习1.通过JS修改元素的样式语法：元素.style.样式名=样式值注意：如果css的样式名含有-，这种名称在js中时不合法的比如background-color需要将这种样式修改为驼峰命名法方法：去掉-，然后将-后的字母大写 2.读取元素的样式语法：元素.style.样式名通过style属性设置和读取的都是内联样式，无法读取样式表中的样式 获取元素当前样式 1.IE浏览器currentStyle语法：元素.currentStyle
二十一，DOM操作CSS
qq_33345511的博客
02-11 196
一，DOM操作内联样式 前面我们操作DOM都是操作HTML标签，也就是在操作结构。那我们也可以通过DOM操作表现CSS样式。 通过JS修改元素的样式，语法： 元素.style.样式名 = 样式值 注意：如果CSS的样式名中含有“-”，这在JS中是不合法的比如：background-color需要将这种样式名修改为驼峰命名法。 我们通过style属性设置的样式都是内联样式，内联样式的优...
JavaScript 通过DOM操作CSS
路虽远，行则必至！
06-29 461
一、书写 HTML 标签并为其设置CSS样式，如下图： 二、执行上述代码，运行结果，如下图： 三、点击按钮1以后，修改元素的样式，JS代码，如下图： 四、点击按钮1，即可修改元素样式，如下图： 五、点击按钮2以后，读取元素的样式，JS代码，如下图： 六、点击按钮2，即可读取元素样式，如下图： 七、总结 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式 读取元素样...
获取DOM对象——根据css选择器来获取DOM元素
往前爬的蜗牛
04-01 2163
文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。 语法： elment = document.querySelector('css选择器') 如： <button id= 'do' class= 'in'></button> `document.querySelector:` document.querySelector('butto
css3美化滚动条样式
weixin_34260991的博客
03-29 73
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性 background-color:#f8f8f8; } ::-webkit-scrollbar {//滚动条的宽度 width:9px; height:9px; } ::-webkit-scrollbar-thumb {//滚动条的设置 ...
JavaScript学习记录-DOM操作CSS
wendZzoo的博客
09-18 238
CSS可以增强页面的显示效果，但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以有必要检测当前浏览器支持CSS能力的级别。DOM1级实现了最基本的文档处理，DOM2和DOM3在这个基础上增加了更多的交互能力。DOM2增加了CSS编程访问方式和改变CSS样式信息。 检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力， alert('DOM1级CSS能力：...
DOM对CSS的操作
毕富国的博客
07-23 1264
DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式： 语法：元素.style.样式名 - 例子： 元素.style.width 元素.style.height - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写 - 比如：background-color --&gt; backgr...
jquery 操作dom改变css
最新发布
05-25
使用 jQuery 操作 DOM 改变 CSS 的方法如下： 1. 选取需要改变 CSS 样式的元素，可以使用 jQuery 的选择器来选取元素。 2. 使用 `.css()` 方法来改变 CSS 样式，该方法接受两个参数，第一个参数是 CSS 属性名称，第二个参数是属性值。 例如，如果要将 `<div id="myDiv">` 的背景色改为红色，可以使用以下代码： ```javascript $("#myDiv").css("background-color", "red"); ``` 如果要同时改变多个 CSS 属性，可以在 `.css()` 方法中传递一个对象，该对象的属性名为 CSS 属性名，属性值为属性值。例如： ```javascript $("#myDiv").css({ "background-color": "red", "color": "white", "font-size": "16px" }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值