JavaScript DOM操作之:CSS属性操作基础

最新推荐文章于 2022-10-11 11:28:03 发布
最新推荐文章于 2022-10-11 11:28:03 发布
阅读量966 收藏
点赞数
分类专栏： 前端学习 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Morbidmuse/article/details/122063702
版权 
CSS属性操作:
	指的是通过JavaScript来操作一个元素的CSS样式
	获取CSS属性值
		getComputedStyle(obj).attr / getComputedStyle(obj)['attr']  两种写法一样
		attr表示css属性名,但必须写成驼峰型,如font-size应该写成fontSize,因为'-'不是有效的js标识符
		
	设置CSS属性值
		style对象
			在元素的style属性中添加样式,这种方式设置的是行内样式
			obj.style.attr='值'
			
		cssText属性
			可以同时设置多个CSS属性,这也是在元素的style属性中添加的
			obj.style.cssText='值'
			如 oDiv.style.cssText='width:100px;height:100px;border:1px solid gray'
			在实际开发中很少使用这种方式设置多个css属性
				而是采用操作html属性的方式给元素加上一个class属性,从而整体地给元素添加属性
		无法使用obj.style.attr的方式来获取内部样式或者外部样式,这种方式只能获取行内样式
		所以获取css的属性值要使用getComputedStyle(obj).attr

01获取元素CSS样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #2F4F4F;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				oBtn.onclick=function(){
					alert(getComputedStyle(oBox).backgroundColor);
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			
			
		</div>
		<input type="button" name="" id="btn" value="查看" />
	</body>
</html>

02style对象设置css行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 6.25rem;
				height: 6.25rem;
				background-color: aqua;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				oBtn.onclick=function(){
					oBox.style['backgroundColor']='lightskyblue';
					oBox.style.border='2px solid green';
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
		<input type="button" id="btn"  value="修改"/>
	</body>
</html>

03复合属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #2F4F4F;	
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				oBtn.onclick=function(){
					//获取两个文本框的值
					var attr = document.getElementById('attr').value;
					var val =document.getElementById('val').value;
					oBox.style[attr]=val;
				}
				
				
			}
		</script>
	</head>
	<body>
		属性:<input type="text" name="" id="attr" value="" /><br>
		取值:<input type="text" name="" id="val" value="" /><br>
		<input type="button" id="btn" value="设置"/>
		<div id="box">
			
		</div>
	</body>
</html>

04cssText属性设置举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 6.25rem;
				height: 6.25rem;
				background-color: #00FFFF;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				var oBox=document.getElementById('box');
				oBtn.onclick=function(){
					// 获取文本框的值
					var txt = document.getElementById('txt').value;
					oBox.style.cssText=txt;
				};
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="txt" value="" /><br>
		<input type="button" name="" id="btn" value="设置" />
		<div id="box">
			
		</div>
	</body>
</html>

05使用html属性操作来修改多个css属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.oldbox{
				width: 100px;
				height:100px;
				background-color: antiquewhite;
			}
			.newbox{
				width: 200px;
				height:200px;
				background-color: #2F4F4F;
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn = document.getElementById('btn');
				var oBox=document.getElementById('box');
				oBtn.onclick=function(){
					oBox.className='newbox';
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="切换" />
		<div id="box" class="oldbox">
		
		</div>
	</body>
</html>

生命不息,流汗不止.

Morbidmuse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
示例4：操作节点属性.rar_javascript操作节点属性
09-20
理解并熟练掌握JavaScript操作DOM节点属性是成为合格前端开发者的关键技能之一。 通过示例4：操作节点属性的压缩包文件，你将能够深入学习这些概念，并通过实际代码示例进行实践，从而更好地理解和应用到自己的项目...
JS DOM之操作CSS属性
大河之犬的博客
10-06 2430
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。
javascript(使用DOM操作CSS，其他样式操作的属性，事件）
m0_62520946的博客
07-16 746
目录使用DOM操作CSS获取元素当前样式其他样式操作的属性事件对象练习1.通过JS修改元素的样式语法：元素.style.样式名=样式值注意：如果css的样式名含有-，这种名称在js中时不合法的比如background-color需要将这种样式修改为驼峰命名法方法：去掉-，然后将-后的字母大写 2.读取元素的样式语法：元素.style.样式名通过style属性设置和读取的都是内联样式，无法读取样式表中的样式 获取元素当前样式 1.IE浏览器currentStyle语法：元素.currentStyle
【JavaScript 教程】DOM——CSS 操作
油墨香^-^的博客
06-13 1242
CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如何通过 JavaScript 操作 CSS。 HTML 元素的 style 属性 操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。 div.setAttribute( 's
JS / DOM
K10
09-06 547
文档表示的是整个HTML网页文档对象表示将网页中的每一个部分都转换为了一个对象模型表示对象之间的关系，方便我们获取对象。
css设置穿透元素
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-11 2348
css设置穿透元素
DOM操作一些常用的属性汇总
12-09
DOM还提供了其他一些关键属性，如`textContent`用于获取或设置元素的纯文本内容，`style`属性还可以用来获取和设置元素的所有CSS属性，而`appendChild()`、`removeChild()`、`insertBefore()`等方法则用于操作元素...
JavaScript：DOM操作与事件处理
最新发布
07-14
### JavaScript：DOM操作与事件处理 #### 一、DOM模型的基本概念 DOM，全称为**文档对象模型**（Document Object Model），是HTML和XML...这些基础知识对于理解和操作网页内容至关重要，是前端开发的基础技能之一。
详解JavaScript操作HTML DOM的基本方式
11-23
本文将深入解析如何利用 JavaScript 对 HTML DOM 进行基本操作，包括查找元素、改变元素内容和属性。 首先，HTML DOM（文档对象模型）是一个基于树形结构的接口，浏览器在加载网页时会构建这个模型。每个 HTML 元素...
jQuery001：jQuery中css，attr和prop的用法；jQuery和DOM对象的转化
weixin_44699728的博客
06-20 162
为了简化javascript的开发,一些javascript库诞生了。jQuery不是一门新的语言，而是把js进行封装，通过调用jQuery能够做出一些非常好看的特效。所以它是一个前端框架。它是轻量级的js库(压缩后只有21k),这是其他js库所不及的!它兼容各大浏览器 当今流行的javascript库有:jQuery, （诞生于2005年）Dojo,EXT_JS DWR,YUI… 示范一个...
HTML DOM Attr对象
老狼的专栏
03-07 1260
HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 所有的都是节点： 文档是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性都是属性节点 插入到 HTML 元素中的文本为文本节点 注释是注释节点 Attr 对象 在 HTML DOM 中,Attr 对象代表一个 HTML 属性。 HTML属性总是属于HTML元素。 ...
[Javascript]：DOM操作之动态修改CSS样式和高级选择器
热门推荐
我只是个程序员。
09-19 1万+
首选，回顾一下CSS定义样式的三种方式：链接外部样式、嵌入样式(放在head元素中)和内联样式（行内样式）。想要让样式生效，有如下方式： 通过CSS选择器来进行大规模选取，但通常会用到ID属性和class属性来指定范围。通过ID和class属性来设置样式。直接定义内联样式，直接作用于当前标签。当然，有些标签提供了样式属性，但不推荐使用。结构与表现应该分开。 但CSS样式是静态的，要让C
jq 查找dom 添加css属性
weixin_44769592的博客
07-22 641
js与jq对比 1.利用原生js查找dom var div1=document.getElementsByTagName("div")[0]; 利用js为dom添加css属性 div1.style.backgroundColor="red"; 2.利用jq查找dom var $div4=$(".one"); 是不是简化了超多！！！ 用jq添加css属性 $div4.css({ backgr...
javascript,jquery动态添加dom元素，并设定css属性，点击事件
天步的博客
01-05 4071
$('>',{             alt:'hello img!',  //设置alt属性         title:'just for test',  //设置title属性         click:function(){  //绑定点击事件             alert("添加div元素!!!");           }       }).css({     
js改变DOM样式的三种方式
风烟
11-16 1万+
方法一： 最简单也是最直接的方法就是直接修改DomNode的style属性： 如下面的代码`var node = document.getElementById('node'); node.style.color = 'red';方式二： 因为表现应该是表现层的也就是css所所的事，所以可以这样代码如下： var node = document.getElementById('node');
通过js 快捷给元素设置多个css属性 -- cssText
Dark_programmer的博客
12-14 3143
cssText js操作dom元素是很常见的操作。 有这么一个场景，对新创建的dom元素通过js设置多组css属性。 基操： let element = document.createElement("div"); document.body.appendChild(heart).innerHTML = '我是新建元素的文案'; element.style.height = '100px'; // 设置元素高度 element.style['text-align'] = '100px'; // 设置元素行
DOM 操作元素对象的属性和CSS样式
jssd的博客
08-20 589
DOM获得操作对象的属性 W3C教程链接: https://www.w3school.com.cn/jsref/dom_obj_all.asp 直接操作元素的属性 获得属性的值 var inp1 = docuement.getElementById("inp1"); var type = inp1.type; // 获得的值, 是实时更改的值, 不是元素的默认值 var value = inp...
DOM操作CSS样式设定
qq_45799465的博客
02-01 1078
标签对象.style.属性 = 属性值，只能获取行内样式 注意： JavaScript中 - 只作为减号使用。 css属性中带有 - 的属性 必须写成小驼峰命名法 font-size ---- fontSize margin-top ---- marginTop。 如果需要单位 必须要 携带单位 不能光写数字需要区分css样式和属性。 <style> *{ margin: 0; padding: 0; }
js给元素加样式类
rong05151005的博客
04-03 5248
1、覆盖原来的类 dom.setAttribute(“class”,“newClass”) 2、追加样式类不覆盖原来的样式 dom.classList.add(“newClass”) 代码示例： 同理： 3、移除样式类 dom.classList.remove(“oldClass”) 4、检查是否含有某个类 dom.classList.contains(“oneClass”) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值