JS：获取DOM上样式

最新推荐文章于 2022-06-04 20:46:25 发布
最新推荐文章于 2022-06-04 20:46:25 发布
阅读量230 收藏
点赞数
文章标签： 获取DOMstyle JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoxiaozhuang4/article/details/80256475
版权

1. 起因：使用element.style.width获取元素宽度时失败。

2. 总结如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ad {
				width: 200px;
				height: 200px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		
		<div class="ad">
			
		</div>
		
		<div id="ap">
			
		</div>
		
		<script type="text/javascript">
			
			var ad = document.querySelector('.ad')
			var {log} = console
			
			//1. 只能读取DOM上的style属性的值
			log(ad.style.width)
			
			//2. window.getComputedStyle(element, [pseudoElt]);	可以读取应用到DOM上的所用样式
			//	 第二个参数为伪元素。
			//	 如::before, ::after, ::first-line, ::first-leter, ::content等等
			log(getComputedStyle(ad).width)
			
			//3. 低版本IE中实现，不建议使用
			console.dir(ad.currentStyle)
			
		</script>
		
	</body>
</html>

至此。

Koon_AgueroAgnis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 获取DOM元素样式
challenge_impossible的博客
05-23 7923
    HTML的样式写入方法有：1、行内样式；2、内嵌样式；3、外联样式表。    行内样式：一般是用style写在dom元素上的，例如：&lt;div style='height:200px;'&gt;&lt;/div&gt;;    内嵌样式：一般是用style写在head标签内的。&lt;style type='text/css'&gt;&lt;/style&gt;;    外联样式：一般...
获取DOM的样式
低至一折起的博客
12-12 275
<div id="demo">这里是测试内容</div>getStyle（‘demo’，‘width’）function getStyle(elem, name){ // 如果该属性存在于style[]中，则它最近被设置过(且就是当前的) if (elem.style[name]) { return elem.style[name]; } //
style、currentStyle、getComputedStyle区别介绍
weixin_30898109的博客
02-20 245
样式表有三种方式 内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。 内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。 外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个...
js 获取当前dom元素的所有样式(getComputedStyle())，并且修改样式
逆风优雅的博客
04-07 6037
1. 首先getComputedStyle（）此方法用于获取当前dom的样式 getComputedStyle() 的使用方法： // getComputedStyle方法可以用来获取DOM元素实际显示时的样式 // getComputedStyle是window全局对象的一个方法，可以传递两个参数，第一个参数指定一个用来获取计算样式的DOM元素， // 第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传null。 2. 使用setProperty（）方法来
JavaScript实现获取dom中class的方法
12-09
总的来说，JavaScript获取DOM元素中class的方法主要分为以下步骤： 1. 检查DOM元素是否支持`getElementsByClassName`方法。 2. 如果支持，直接调用此方法获取元素集合。 3. 如果不支持，遍历元素的子节点，通过`...
JS中获取 DOM 元素的绝对位置实例详解
12-10
在JavaScript中，获取DOM元素的绝对位置是一项常见的需求，特别是在实现动态效果如页面滚动和动画时。例如，创建像本文例中的左侧悬浮导航，需要精确地掌握元素在页面中的位置，以便在滚动过程中保持其固定位置。...
Pig-Game:JS Dom操作小项目
05-19
例如，每个玩家的得分需要存储并显示在界面上，这可以通过获取DOM元素，读取或修改`value`属性来完成。此外，游戏状态的改变，如是否有人达到终点，也需要通过修改特定元素的样式或内容来体现，如改变背景色、显示...
FK-Rad：JS DOM家庭作业
02-20
在这个“FK-Rad：JS DOM家庭作业”中，我们将深入探讨JavaScript如何与DOM进行互动，以及如何利用它来实现动态网页效果。 1. **DOM基本概念** - DOM是一个标准，由W3C制定，用于表示HTML和XML文档。 - 它将文档...
JavaScript获取DOM元素的11种方法总结
01-21
令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过...
JavaScript-DOM:JS学习者使用JavaScript DOM的最小项目
04-27
2. **读取（Read）**: 获取DOM元素常用的方法有`getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`等。例如，读取ID为'myDiv'的元素： ```javascript let myDiv = document....
原生JS实现获取及修改CSS样式的方法
10-18
原生JavaScript获取和修改CSS样式是前端开发中常见的操作，理解并熟练掌握这些方法对于动态更新页面样式至关重要。通过`style`对象和`getComputedStyle()`方法，我们可以灵活地操控页面元素的外观。同时，考虑到...
逆战班：DOM获取元素对象
01-08
首先，获取DOM元素是JavaScript中常见的任务。以下是一些常用的方法： 1. **根据ID获取元素**： 使用`getElementById()`方法可以获取具有特定ID的唯一元素。例如，如果有元素`<div id="name"></div>`，我们可以...
在vue中获取dom元素内容的方法
08-30
在实际开发中，使用 ref 属性获取 DOM 元素内容可以解决很多问题，例如，获取某个元素的尺寸、位置、样式等信息，或者对某个元素进行操作，例如，动态地添加或删除元素等等。 此外，使用 ref 属性获取 DOM 元素内容...
发现飞行：JavaScript DOM项目
02-15
"发现飞行：JavaScript DOM项目" 这个标题揭示了这是一个关于JavaScript编程实践的项目，特别关注于DOM（Document Object Model）的使用。DOM是网页内容的编程接口，JavaScript通过DOM来操作HTML和XML文档，实现页面...
DOMjs获取样式（包括常用事件）
ceike的博客
06-04 1255
包含隐藏展开功能 onmousedown===onclick *1. .操作符 => 获取元素样式 元素.style.样式名 获取对应的样式 a. 只能获取行内样式 2. 获取内联样式与外联样式 getComputedStyle(元素节点).样式名 返回一个style完整的样式表
JavaScript-DOM-获取样式
java_zhaoyanli的专栏
03-01 359
new document function getStyle(){ var d1 = document.getElementById("d1"); /*d1.style.backgroundColor="green";*/ var width = d1.style.width; console.log(width); } function getS
JS获取DOM结点的样式
曦曦酱酱的博客
07-11 327
JS获取dom结点样式
通过DOM来获取元素样式
XinKun的博客
11-23 761
一、IE浏览器获取样式 读取box1当前显示的样式的宽度 语法：元素.currentStyle.样式名 他可以用来显示当前元素样式 只有IE支持这种方式!!!! 二、其他浏览器获取样式 在其他浏览器中可以使用 getComputedStyle().样式 这个方法来获取当前元素的样式 这个方法时window的方法 可以直接使用 需要两个参数 第一个 要获取样式的元素 第二个 可以传递一个伪元素 一般都传null 该方法会返回一个对
DOM获取元素的样式
Paranoid_truggle的博客
07-30 451
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 200px; height: 200px; background-color: red; } </style> <sc
深入理解JavaScript：语法、DOM与BOM操作
当我们在HTML中编写JavaScript时，这些脚本会被解释器执行，进而对DOM进行操作，从而实现网页动态效果，如元素定位、样式改变等。 3. **DOM对象与BOM对象的区别**：BOM(Browser Object Model)指的是浏览器对象模型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值