DOM属性的设置和获取

DOM样式操作详解

原创于 2019-01-25 11:43:55 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用DOM API修改和获取HTML元素的样式，包括宽度、高度、背景颜色等属性的设置方法，以及如何通过window.getComputedStyle获取元素的所有计算后的样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM样式</title>
	<script type="text/javascript">
			/*
			DOM样式的修改：
				对象.style.属性名=属性值;



				CSS  					DOM

				width					width
				height					height
				background-color        backgroundColor
				font-size				fontSize
				border-color			borderColor
				... 					...
			DOM样式值的获取：
				1.对象.style.属性名	
					只能获取行内样式
				2.
					window.getComputedStyle(对象,null)
					获取指定对象的所有样式


		*/
	</script>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		var o=document.getElementById("box");
		o.style.width="150px";
		o.style.height="150px";
		o.style.backgroundColor="red";
		o.innerHTML="哈哈";
		o.style.textAlign="center";
		o.style.lineHeight="150px";
		o.style.color="white";
	</script>
</body>
</html>