基本样式：

style标签

<style>
div{
/*		width:200px;*/
	height: 200px;
	margin: 100px auto 20px;
	background: #F0A1A2;
}	
div:before{
	
}
div:after{
	
}
button{
	display: block;
	width:100px;
	padding: 10px 40px;
	margin: 10px auto;
	border:none;	
	border-radius: 5px;
	background:#3F78D0;
	color: #fff;
}
</style>

body标签内

<div id="box"></div>
<button id="btnInlineStyle">获取元素内联样式</button>
<button id="btnDisplayStyle">获取元素显示样式</button>

JS修改元素的样式

元素.style.样式名=样式值

读取方式：元素.style.样式名

• 通过style属性设置和读取的都是内联样式

var box=document.getElementById("box");
//获取元素内联样式的按钮
var btnInlineStyle=document.getElementById("btnInlineStyle");
//获取元素显示样式的按钮
var btnDisplayStyle=document.getElementById("btnDisplayStyle");
btnInlineStyle.onclick=function(){
	box.style.width="300px";
    console.log("-------------------------我是知识点分割线 · 当前知识点是：DOM节点的操作---------------------")
	console.log(box.style.width);
	console.log(box.style.height);
}

获取元素的当前显示样式

语法：元素.currentStyle.属性名 或 元素.currentStyle[属性名]

• currentStyle可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。例如：如果没有设置width，获取到的值为auto

注意：！！！该属性只有IE支持，其他的浏览器都不支持

---

在其他浏览器中可以使用

• getComputedStyle() 这个方法获取当前元素的显示样式

这个方法是window的方法，可以直接使用

参数说明：

1. 需要获取样式的元素
2. 可以传递一个伪元素，一般都传null

说明：该方法返回一个对象，对象中封装了当前元素对应的样式
var obj=getComputedStyle(element,null);//该方法的使用说明

获取元素显示样式：
obj.属性名 或 obj["属性名"]

如果获取的样式没有设置，则会获取到真实的值，而不是默认值。
例如：如果没有设置width，获取到的值为1200px(元素实际的值)

注意：！！！该方法不支持IE8及以下的浏览器

btnDisplayStyle.onclick=function(){
//		var s=box.currentStyle.height;
//		console.log(s);
//		console.log(box.currentStyle.backgroundColor);
//		console.log(box.currentStyle["backgroundColor"]);
//		console.log(box.currentStyle.width);
//		var obj=getComputedStyle(box,null);
//		console.log(obj.width);
//		console.log(obj.height);
//		console.log(obj.backgroundColor);
//		console.log(obj["backgroundColor"]);
	console.log(getStyle(box,"width"));
	console.log(getStyle(box,"backgroundColor"));
	
}

示例

定义一个函数，用来获取指定元素的当前样式

参数：

1. element 要获取样式的元素
2. name 需要获取的样式名

function getStyle(element,name){
//		//大部分浏览器中
//		return getComputedStyle(box,null).width;
//		//IE中获取元素
//		return element.currentStyle.width
	if(window.getComputedStyle){
		return getComputedStyle(element,null)[name];
	}else{
		return element.currentStyle[name];
	}
}

getComputedStyle() 方法与 currentStyle 属性都是只读的属性，不能修改属性，如果需要修改属性的值，只能使用style属性（元素.style.样式属性 = 值）

关于DOM的综合应用

style标签

<style>
button{
	display: block;
	width:100px;
	padding: 10px 40px;
	margin: 10px;
	border:none;	
	border-radius: 5px;
	background:#3F78D0;
	color: #fff;
}
.box{
	width: 200px;
	height: 200px;
	padding: 10px;
	border:10px solid #A85ED5;
	background: #F5BEBF;
	position: absolute;
	top: 20px;
	left: 20px;
}
.container{
	width:300px;
	height: 300px;
	border:1px solid #2F669E;
	position: relative;
}
#wrap{
	width:300px;
	height: 300px;
	background: #DC999A;
	overflow: auto;
}
#wrap>div{
	width:600px;
	height: 600px;
	background: #86D6B9;
}
</style>

body标签内

<button id="btn1">按钮一</button>
<div style="position: relative;">
	<div class="container">
		<div class="box" id="box"></div>
	</div>
</div>
<button id="btn2">按钮二</button>
<div id="wrap">
	<div></div>
</div>

<div style="height: 200px;"></div>

元素的属性与方法

下面的属性和方法可用于所有 HTML 元素上：

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的内容是否可编辑。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。

示例

var btn1=document.getElementById("btn1");
varbox=document.getElementById("box");
btn1.onclick=function(){
	/*
		element.clientHeight
		element.clientWidth
			- 这两个属性可以获取元素的可见宽度和高度
			- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
			- 会获取元素宽度和高度，包括内容区和内边距
			- 这些属性都是只读的，不能修改
	*/
	console.log("box.clientHeight="+box.clientHeight);
	console.log("box.clientWidth="+box.clientWidth);
	/*
		element.offsetHeight
		element.offsetWidth
			- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
	*/
	console.log("box.offsetHeight="+box.offsetHeight);
	console.log("box.offsetWidth="+box.offsetWidth);
	
	/*
		element.offsetParent
			- 可以获取当前元素的定位父元素
			- 会获取到距离当前元素最近的设置定位的祖先元素
				如果所有的祖先元素都没有设置定位，则返回body
	*/
	var ele=box.offsetParent;
	console.log(ele);
	/*
		element.offsetLeft
			- 当前元素相对应其定位元素的水平偏移量
		element.offsetTop
			- 当前元素相对应其定位元素的垂直偏移量
	*/
	console.log("box.offsetLeft="+box.offsetLeft);
	console.log("box.offsetTop="+box.offsetTop);
};
var btn2=document.getElementById("btn2");
var wrap=document.getElementById("wrap");
btn2.onclick=function(){
	/*
		element.scrollWidth 
		element.scrollHeight 
			- 可以获取元素整个滚动区域的宽度和高度
	*/
	console.log("wrap.scrollWidth="+wrap.scrollWidth);
	console.log("wrap.scrollHeight="+wrap.scrollHeight);
	
	/*
		element.scrollLeft 
			- 可以获取水平滚动条滚动的距离
		element.scrollTop 
			- 可以获取垂直滚动条滚动的距离
	*/
	console.log("wrap.scrollLeft="+wrap.scrollLeft);
	console.log("wrap.scrollTop="+Math.round(wrap.scrollTop));
	
	console.log("wrap.clientHeight="+wrap.clientHeight);
	console.log("wrap.clientWidth="+wrap.clientWidth);
	//当满足scrollHeight==clientHeight+scrollTop
	//说明垂直滚动条滚动到底了
	//当满足scrollWidth==clientWidth+scrollLeft
	//说明水平滚动条滚动到底了
}

💕👉博客专栏

• Golang专栏-包含基础、Gin、Goam等知识
• 云原生专栏-包含k8s、docker等知识
• 从0开始学习云计算-华为HCIP证书
• JUC专栏-带你快速领悟JUC的知识！
• JVM专栏-深入Java虚拟机，理解JVM的原理
• 基于Java研究 数据结构与算法-包含贪心算法、加权图、最短路径算法等知识
• Docker专栏-上手热门容器技术Docker
• SpringBoot专栏-学习SpringBoot快速开发后端
• 项目管理工具的学习-设计技术：Maven、Git、Gradle等相关管理工具
• JavaSE-全面了解Java基础
• JS专栏-使用JS作的一部分实例~
• 使用CSS所作的一部分案例