JS DOM 编程复习笔记 -- 操作style样式、class、getComputedStyle（十一）

今天我们来复习如何使用JavaScript DOM来进行内联样式修改，CSS class的修改，以及获取元素的真实样式，获取元素的真实宽高等。

目录

• element.style
• window.getComputedStyle()
• element.className
• element.classList

设置内联样式

我们使用元素 style 属性来操作元素的内联样式。

style属性返回CSS属性的CSSStyleDeclaration只读对象，例如要将元素的color设置为红色

element.style.color = 'red';

如果是包含-的CSS属性，比如 -webkit-text-stroke，我们可以使用[]来访问该属性

element.style.['-webkit-text-stock'] = 'unset';

下面的表格中展示了常用的CSS属性

CSS	JavaScript
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
float	cssFloat
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
stroke-dasharray	strokeDasharray
stroke-dashoffset	strokeDashoffset
stroke-width	strokeWidth
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

如果需要批量覆盖现有的内联样式，可以使用 cssText 属性

element.style.cssText = 'color:red; background-color:yellow';

或者也可以使用setAttribute()方法

element.setAttribute('style','color:red; background-color:yellow');

设置完成后，也可以单条修改CSS样式

element.style.color = 'blue';

如果不想覆盖掉现有的样式，也可以将新的CSS追加到原有样式的后面

element.style.cssText += 'color:red; background-color:yellow';

我们也可以封装一个公共函数，通过传入一个key-value的对象来给元素设置CSS样式

function css(e, styles) {
   
  for (const property in styles)
    e.style[property] = styles[property];
}

使用css()来设置样式

let content = document.querySelector('#content');
css(content, {
    background: 'yellow