Javascript 如何修改CSS样式(网页样式) 补充说明

最新推荐文章于 2022-06-10 21:09:47 发布
最新推荐文章于 2022-06-10 21:09:47 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： Javascript 学习笔记 文章标签： javascript 网页样式修改 css 访问
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuyizhonhong/article/details/50603265
版权

我写了一片文章：

Javascript 如何访问修改CSS样式(网页样式) 

后来发现对这个访问和修改了解的却并不是很深入，访问和修改是不一样的，如果是访问的话，请看我写的《Javascript 如何访问修改CSS样式(网页样式) 》，如果是修改的话，就请看本文吧，不过也可以看看《Javascript 如何访问修改CSS样式(网页样式) 》，加深一下理解。


注意：javascript访问和修改CSS样式具有不同的方法，能访问的一般能修改，但是，能修改样式的却不一定能访问，也就是在访问时输出为null（或者空），对于这个问题，请看：Javascript 如何访问修改CSS样式(网页样式)


使用 javascript 修改网页样式可以通过

  1. 直接改变样式
  2. 改变className
  3. 改变cssText


三种方式来实现。


这里需要注意的是 javascript 对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果

下面对这三种方式再做一个简单的说明：


1. 改变元素的className

通过改变一个元素的 className，使其变为另外一种 样式，这需要事先写一个CSS样式表，定义类选择器

这里需要注意的是：在调用时不再写style，比如：

document.getElementById('div1').style.className="....." 的写法是错误的，应该这样写：

document.getElementById('div1').className="....."    这个一定要注意！！


2. 改变元素的cssText

和改变className不同的是，在改变元素的cssText时，必须加上style，比如正确的写法如下：

document.getElementById('div1').style.cssText="....."  这个一定和上面的对照着看！！


3. 直接改变样式

用法比如：

document.getElementById('div1').style.width="....."；

document.getElementById('div1').style.backgroundColor="....."；等等


下面看一个具体的例子：

mycss.css 

.style1{
	width:500px;
	height:200px;
	background-color:pink;
}
.style2{
	width:600px;
	height:100px;
	background-color:yellow;
}
.style3{
	width:300px;
	height:300px;
	background-color:green;
}
.style4{
	width:400px;
	height:400px;
	background-color:blue;
}

html 

<html>  
	<link rel="stylesheet" type="text/css" href="mycss.css" />  
	<head>  
		<script language="javascript">  

			function test(eventObj){
				//获取元素
				var div1=document.getElementById('div1');
				
				window.alert(div1.className);
				window.alert(div1.style);	
				window.alert(div1.style.cssText);  //这里输出为空

				if(eventObj.value=="改变className"){
				
					div1.className="style2";   //这里不写style
					div1.className="style3";
					div1.className="style4";
					
				} else if(eventObj.value=="改变cssText"){
					
					div1.style.cssText="width:400px;height:300px;background-color:blue";  //这里要写style
					
				} else if(eventObj.value=="改背景色为红色"){
					
					div1.style.backgroundColor="red";	
					
				} 			
			}	
		</script>  
	</head>  
	<body > 
	<div id="div1" class="style1">div1</div>
	<input type="button" value="改变className" οnclick="test(this)"/><!-- 这里的this就是当前button对象 -->
	<input type="button" value="改变cssText" οnclick="test(this)"/>
	<input type="button" value="改背景色为红色" οnclick="test(this)"/>
	</body>  
</html>

实际运行效果请粘贴代码运行

D计划
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript修改样式
v790873的博客
08-30 1476
创建style元素修改样式 <body> <h1>helloworld</h1> <script type="text/javascript"> var styleDom = document.createElement('style'); styleDom.innerHTML = `.bgRed{ backgr...
用JavaScript修改网页样式
ajo49838的博客
10-11 255
http://www.ccvita.com/289.html一、局部改变样式分为改变直接样式，改变className和改变cssText三种。需要注意的是：注意大小写：javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。调用方法：如果改变className，则事先在样式表中申明类，但调用时不要再跟s...
JavaScript修改Css样式
zhansan的博客
06-03 3433
javascript修改css
JavaScript改变样式
离开实践的理论是空洞的理论,没有理论指导的实践是盲目的实践
04-01 599
javascript body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;} p{ line-height:18px; text-indent:2em;} JavaScript课程 JavaScript为网页添加动态效
使用 JavaScript 更改 CSS 示例
allway2的博客
06-10 4574
JavaScript 都是关于动态的东西，处理动态 CSS 更改只是 JavaScript 正是我们需要的场景之一。使用 JavaScript，我们可以为 DOM 中的一个或多个元素设置 CSS 样式，修改它们，删除它们，甚至更改所有页面的整个样式表。让我们来看看我们可以做到这一点的不同方法：直接从 JavaScript 设置单个样式是处理动态 CSS 样式时最常见的场景之一。这种方式允许您更改 DOM 中存在的一个或多个元素的 CSS 样式。你所要做的就是： 如果您像这样执行此代码，您会注意到更改
JavaScript修改css样式style
12-10
需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但...
JavaScript修改css样式style动态改变元素样式
12-01
需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但...
javascript 动态修改css样式方法汇总(四种方法)
10-23
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
12-10
众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单，通过element.style.attr（元素.style.属性...
通过 JavaScript 改变元素的样式
kllo__的博客
02-09 2753
<html> <head> </head> <body> <p>First</p> <p style="color: green;">Second</p> <p id="para">Third</p> </body> </html> 样式属性 DOM 元素具有一个名为 style 的属性，该属性返回一个表示 HTML 元素 sty.
JavaScript修改样式问题
v790873的博客
09-20 172
对layui空白处修改背景色，达到修改界面打钩的样式 JavaScript代码 var selectAllbtn =document.querySelector('.layui-unselect.header.layui-form-checkbox') var isAllselect = false selectAllbtn.addEventListener("cl...
JavaScript控制读取和修改CSS样式
WeiZhihuiCSDN的博客
04-19 433
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ wi...
Javascript改变css样式的四种方法
line233的博客
08-11 4394
了解一些JavaScript知识的童鞋应该知道，js是可以改变任意的htm标签l和css样式的，以下是js动态改变css样式的几种方法。 例： HTML: &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="vie
jQuery修改网页样式
MorningLight_LQ的博客
05-29 469
在网页上直接修改样式这个功能直接使用的比较少，但在做网页前端的时候使用到相似的功能却不少，所以其中的原理还是很有必要知道一下的。 原理概念：很简单就是获取输入的样式，将其赋值给相对应要改变的元素。 难点要点：同时掌握jQuery方法和JavaScript方法，封装一个函数，再创建一个单击事件，函数内容： 获取输入值： var kuandu = document.getElementById("kuandu").value; $("#kuandu").val(), 赋值给相应要改变的...
通过JS修改元素样式
轻水与猫的博客
02-05 3684
语法：  元素,style.样式名 = 样式值 var box1=document.getElementById("box1");  box1.syle.width="100px"; 注意：如果CSS样式名含有 “-”如：background-color，这种名称在JS中不合法，需要将样式名修改为驼峰命名法， backgroundColor。 style设置的样式都是内联样式，有较高的优
修改css
zhaoyangjian724的专栏
10-24 417
.content{ height: 100%; } .con{ border: 1px solid #eeeeee; display: inline-block; width:86.8%; ##修改这里 height: 100%; }
javascript修改css样式表
weixin_30394251的博客
07-11 231
//创建var sheet=document.createElement('style');document.bodt.appendChild(sheet);sheet.styleSheet.cssText="div{border:2px solid black; background-color:blue;}";//删除var beRemoved=document.getElement...
js更改常用样式
weixin_41756665的博客
06-25 932
语法：Object.style.property = new style;例子：&lt;p id="pcon"&gt;Hello World!&lt;/p&gt; &lt;script&gt; var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize=..
CSS样式表应用指南：网页样式与布局
CSS(DIV网页样式与布局)是指层叠样式表单，即一种标记语言，用于控制网页样式并将样式信息与网页内容分离。CSS的主要功能是将样式信息从HTML中分离出来，使得网页设计更加灵活和易于维护。 在CSS中，样式表可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值