【JS-13】——JavaScript通过JS修改样式

最新推荐文章于 2024-01-27 12:22:35 发布
最新推荐文章于 2024-01-27 12:22:35 发布
阅读量934 收藏 5
点赞数
分类专栏： JavaScirpt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46351593/article/details/106025342
版权

目前为止，我们的dom一直都在操控html标签，也就是结构，但是还没开始操纵样式呢，接下来我们说一下使用dom操纵css。

文章目录

通过JS修改元素样式

语法：元素.style.样式名 = 样式值注意样式值是字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color:red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					box1.style.width = "400px";	
					box1.style.height = "400px";	
				};
			};
		</script>
		
	</head>
	<body>
		<button id="btn">点我一下变大哦</button>
			<div id="box1"></div>
	
		
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yn5IHq3U-1589019287083)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/1.gif)]

注意：

  • 如果CSS样式名中含有-这种名称在JS中是不合法的，比如:backgroud-color
  • 需要将这种样式名修改为驼峰命名法，去掉-然后将-后的字母大写。
box1.style.backgroundColor = "yellow";

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x80ttGCl-1589019287087)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/2.gif)]

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

通过JS读取样式

语法：元素.style.样式名，注意：通过style属性读取和设置的都是内联样式，无法读取样式表中的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color:red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				var box1 = document.getElementById("box1");
				btn.onclick = function(){
					alert(box1.style.width);
				};
			};
		</script>
		
	</head>
	<body>
		<button id="btn">点我显示</button>
		<br /><br />
		<div id="box1"></div>
	
		
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Hjhehqu-1589019287090)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/3.gif)]

那要是有需要获取样式表里的样式呢？？

获取元素当前显示的样式:

  1. 语法：元素.currentStyle.样式名，但是只有IE支持。

  2. 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素的当前德阳市，这个方法是window的方法，可以直接使用。需要两个参数：第一个：要获取样式的 元素，第二个：可以传递一个伪元素，一般都传null。该方法会返回一个对象，对象中封装了当前元素对应的样式。可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真是的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。但是该方法不支持IE8及以下浏览器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color:red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				var box1 = document.getElementById("box1");
				btn.onclick = function(){
					alert(getComputedStyle(box1,null).width);
				};
			};
		</script>
		
	</head>
	<body>
		<button id="btn">点我显示</button>
		<br /><br />
		<div id="box1"></div>
	
		
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIfXU047-1589019287092)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/4.gif)]

  1. 通过currentStyle和getCOmputedStyle()读取到的样式都是只读的。不能改，如果要修改必须通过style属性。
  2. 创造一个函数，普通浏览器和ie都可以使用：
function getStyle(obj,name){
	if(window.getComputedStyle){
		//正常浏览器，具有getComputedStyle()方法
		return getComputedStyle(obj,null)[name];
	}else{
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}
}

其他样式操作的属性

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NhL1B2vY-1589019287095)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/5.gif)]

padding: 10px;添加内边距，可见宽度和可见高度增加，返回值也增大。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rEj60TfF-1589019287097)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/6.jpg)]

  • offsetWidth,offsetHeight可以获取元素整个的宽度和高度，包括内容区、内边框和边框。
  • offsetParent可以用来回去当前元素的定位父元素。它会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则会返回body。
  • offserLeft,offsetTop表示当前元素相对于其定位父元素的水平偏移量、垂直偏移量。
  • scrollWidth,scrollHeight可以获取元素滚动区域的宽度和高度。
  • scrollLeft,scrollTop可以获得水平、垂直滚动条滚动的距离。当满足scrollHeight - scrollTop == clientHeight或scrollWidth - scrollLeft == clientWidth说明垂直滚动条或水平滚动条滚动到底了。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#info{
				width: 300px;
				height: 300px;
				overflow: auto;
				background-color: #BBFFAA;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var info = document.getElementById("info");
				var input = document.getElementsByTagName("input");
				info.onscroll = function(){
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
					input[0].disabled = false;
					input[1].disabled = false;
					}
				};
			};
		</script>
	</head>
	<body>
		<h3>请开始注册，注意阅读完注册须知</h3>
		<p id="info">
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
			请务必认真阅读注册须知！！！
		</p>
		<input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔细阅读
		<br />
		<input type="submit" name="" id="" value="注册" disabled="disabled"/>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqeA472k-1589019287098)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/7.gif)]

鼠标移入坐标练习

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifAX1rET-1589019287099)(/Users/mac/Desktop/MarkDown /Javascript/图片/【JS-13】/8.gif)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#areaDiv{
				border: 1px solid black;
				height: 100px;
				width: 300px;
			}	
			#showMsg{
				border: 1px solid black;
				height: 50px;
				width: 300px;
				margin-top: 20px;
			}	
		
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 当鼠标在areaDiv中移动时，在showMsg找那个显示鼠标的坐标
				 */
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				
				/*
				 * onmousemove
				 * 	- 该事件会在鼠标在元素中移动时被触发
				 * 
				 * 事件对象
				 *  - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为一个实参传递进响应函数
				 *  - 在事件对象中，封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个键被按下，鼠标滚轮的方向
				 */
				areaDiv.onmousemove = function(event){
					var x = event.clientX;
					var y = event.clientY;
					
					showMsg.innerHTML = "x = " + x+" , "+ "y = "+y;
					
					//在showMsg中显示鼠标的坐标
					
				};
			};
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>

但是，在IE8中，响应函数被触发时，浏览器不会传递对象。在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。（可用 event = event || window.event 代替 envent ）

  • clientX和clientY用于获取鼠标在当前窗口的坐标。
  • pageX和pageY可以获取鼠标相对与当前页面的坐标。但是这两个属性在IE8中不支持，所以需要兼容IE8，则不要使用。

事件的传播

  • 关于事件的传播，网景公司和微软公司有不同的理解。

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应当先触发当前元素上的事件，然后再向当前元素的祖先元素传播，也就是说时间的冒泡阶段执行。

网景公司认为事件应该由外向内传播，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。

W3C综合了两家公司的方案，将事件传播分成了三个阶段：

  1. 捕获阶段：在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
  2. 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
  3. 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

如果希望在捕获阶段触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不希望在捕获阶段触发事件，所以这个参数一般都是false。

IE8及以下的浏览器中没有捕获阶段。

之前的

【JS-11】——DOM事件简介
【JS-12】——DOM相关

阿牛大牛中
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript — 初识JavaScript、JS编写位置、注释、严格模式
m0_59897687的博客
01-21 681
目录 一、初识JavaScript 二、JS编写位置 1.标签属性中 2.script标签 3.外部JS文件（推荐使用） 三、注释 1.单行注释 2.多行注释 四、分号 五、严格模式 一、初识JavaScript JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓前端验证，就是指检查用户输入的内容是否符合一定的规则，比如：用户名的长度，密码的长度，邮箱的格式等等。 JavaScript是由网景公...
js中元素样式设置的六种方法
weixin_52452081的博客
03-23 6639
pink;</</</</
JS中修改元素内容，属性，样式的方法【详解】
杜永康的博客
10-29 4525
如果把属性作为集合，那么样式就是这个集合的元素。样式（style）也是一种属性，样式后面的内容是样式（style）的属性值 属性值里面的内容为 样式名：样式值。所以这种修改有这个特点：修改后的内容会把之前原有的内容覆盖掉，只执行修改后的内容。这种方式，方便我们调试功能，修改元素属性。法一：获取元素名.style.样式名=‘样式值’法二：获取元素名.style=‘样式名：样式值’，color是样式名，red是样式值。获取元素名.属性名=‘属性值’
JS操作元素样式
weixin_51235620的博客
10-22 4663
通过js修改元素样式：   语法：元素.style.样式名=样式值； 如果css样式名中含有-，这种名称在js中是不合法的，比如：background-color需要将这种样式名修改为驼峰命名法：去除-，-后面第一个单词首字母大写，该属性名要改为backgroundColor。   通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即执行。   但是：如果在样式中添加了！important,此时改样式具有最高的优先级，即使通过js也无法覆盖改样式，此时js修
JS改变元素样式
07-22
JS改变元素样式
js改变元素的内容、属性、样式
zhang20040217的博客
01-18 477
注意：虽然这种方法可以工作，但它实际上并不改变元素的样式属性，而是创建了一个新的样式对象，并修改了它的属性。这意味着它不会触发浏览器的重排或重绘，因此它可能比直接设置元素的。方法获取一个元素的所有CSS属性，并返回一个对象，然后你可以修改这个对象的属性来改变元素的样式。属性可以直接改变元素的样式。方法可以改变元素的属性。可以改变元素的内容。
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
通过以上内容，我们了解了如何使用SheetJS和xlsx-style库在前端生成具有复杂样式的Excel表格。这两个库的结合，为前端开发者提供了强大的Excel处理能力，能够满足多样化的需求，从简单的数据导出到复杂的报表设计。
atom-standardjs-snippets：Atom，标准样式JavaScript代码段的集合
01-30
《Atom中的标准样式JavaScript代码段集合：atom-standardjs-snippets》 在编程世界里，高效编码是提升开发速度的关键。Atom是一款广受欢迎的开源文本编辑器，它支持大量的插件和扩展，使得开发者可以根据个人需求...
js-mazegen:JavaScript 中的迷宫生成器
05-31
以上就是关于"js-mazegen"——JavaScript迷宫生成器的关键知识点，涵盖了从算法选择、数据结构到实现细节以及交互性和性能优化等多个方面。通过学习和实践，开发者可以更好地掌握JavaScript编程以及迷宫生成算法的...
js-weather-app：使用javascript的天气应用
03-02
【js-weather-app：使用JavaScript的天气应用】 ...同时，这个项目也是一个很好的实践案例，帮助初学者理解如何将前端三大核心技术——HTML、CSS和JavaScript——结合在一起，创建出功能完善的交互式应用。
js-tetris:现代JavaScript中的俄罗斯方块游戏
05-11
《js-tetris：在现代JavaScript中重构经典游戏——俄罗斯方块》 俄罗斯方块，作为一款历史悠久的经典游戏，以其简单易上手、玩法多变的特点深受玩家喜爱。随着技术的发展，越来越多的游戏开发者选择用现代...
JavaScript是如何改变元素的样式
TXW6666的博客
08-29 5631
js可以操作元素的表现元表现样式 ，但是并不是能直接操作样式表，而是改变元素的属性从而做到改变样式 CSS样式的引用有3种方式：style引用、class引用、id引用，所以js改变元素的样式我们也分3种来说。 1.js改变由style方式引用的样式： 方法一：document.divs.style.cssText=“border:1px solid #000000;color:#FF0000”; 方法二：document.divs.setAttribute(“style”,“border:1px soli
通过js修改css样式
最新发布
翱翔-蓝天
01-27 923
在使用这些方法时，重要的是要确保对DOM的操作在元素实际加载到页面之后进行，通常这可以通过将JavaScript代码放在。通过添加或删除CSS类来修改元素样式是一种更灵活的方法，尤其是当相同的样式需要应用于多个元素时。标签的底部或使用事件监听器来保证。这三种方法各有优缺点，选择哪种取决于你的具体需求和上下文。这种方法允许你动态地修改整个文档的CSS规则。它适用于需要动态调整大量样式规则的复杂场景。这是修改单个元素样式的最直接方式。JavaScript允许直接访问HTML元素的。
js改变元素样式
yanjin_xiaoxiao的博客
07-31 2896
1.在页面上设置初始值 <!doctypehtml> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet"href="style.css">//引入css文件“style” </head> <body> <div> <div> <div> <label.
JS修改style样式
weixin_47449058的博客
10-25 6822
js动态创建样式
原生Javascript/原生JS修改CSS样式的四种方式
YunWisdom
05-09 6715
原生Javascript/原生JS修改CSS样式
【前端学习笔记—使用JS修改样式】
热门推荐
LPC的博客
04-24 1万+
目录JS修改样式的8种方式1.直接设置style的属性2.直接设置属性3.设置style的属性4.使用setProperty5.改变class6.设置cssText7.引入css样式文件8.使用addRule、insertRule JS修改样式的8种方式 1.直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style.height = '100px'; 2.直接设.
JS 样式操作学习总结。
weixin_30322405的博客
07-29 298
在我们编写网页的时候，样式表示我们常常需要相伴的内容，谁然很招人烦。恕我前端菜鸟对这东西很是无力啊。下面是我在代码浪潮中的虚席到的一些东西。 1、样式表内容修改方式。 2、当前元素样式内容获取。 3、document.styleSheets内容。 1.首先我们从最简单的开始，样式表修改。 　　我们在编写网页的时候通常需要对元素进行一些显示样式内容的修改，这是我们其实是有许多种方法的...
JavaScript修改css样式style
小宝
06-20 232
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像document.getElementById(...
JavaScript入门指南：第8版——精通CSS、DOM、Ajax、jQuery
8. **CSS与DOM**：虽然主要关注JavaScript，但也会涉及CSS样式的应用和DOM（Document Object Model）的使用，帮助理解如何操作网页结构。 9. **Ajax**：解释异步JavaScript和XML技术，用于实现页面无刷新更新内容。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值