＜Dom-样式计算＞

最新推荐文章于 2022-04-21 09:54:06 发布

好先生·

最新推荐文章于 2022-04-21 09:54:06 发布

阅读量136

点赞数

分类专栏： Dom操作文章标签： DOM dom操作

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240728

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		#app {
			font-size: 40px;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div id="app" style="font-size: 50px; background-color: pink">
		heslay
	</div>
	<script type="text/javascript">
		var app1=document.getElementById('app');
		//获取样式
		//通过style属性只能获取行内式样式
		//不能获取内嵌式或者外链式的样式
		console.log(app1.style.fontSize);//50px
		console.log(app1.style.width);//获取不到内嵌式中的200px
	//通过window.getComputedStyle方法获取计算后最终的样式
		//如果浏览器支持,可以省略window
		var result=window.getComputedStyle(app1);
		console.log(result);
		//使用getPropertyValue获取某个具体值
		 //使用正确书写
		console.log(result.getPropertyValue('width'));
		console.log(result.getPropertyValue('font-size'));
		//也可以使用result['']获取
		console.log(result['background-color']);

	//较低版本ie浏览器下,获取样式用元素的currentStyle属性
		var result1=app1.currentStyle;
		// alert(result1.fontSize);
	</script>
</body>
</html>```

好先生·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＜Dom-样式计算＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #app { font-size.
复制链接

扫一扫

专栏目录