摘要：在本教程中，您将学习如何使用 style 属性来操作 HTML 元素的内联样式。
设置内联样式
要设置元素的内联样式，您使用该元素的 style 属性
element.styleCode language: CSS (css)style 属性返回只读的 CSSStyleDeclaration 对象，该对象包含一个 CSS 属性列表。例如，要将元素的颜色设置为 red，您使用以下代码
element.style.color = 'red';Code language: JavaScript (javascript)如果 CSS 属性包含连字符（-），例如 -webkit-text-stroke，则可以使用类似数组的表示法（[]）访问该属性
element.style.['-webkit-text-stock'] = 'unset';Code language: JavaScript (javascript)下表显示了常见的 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 |
要完全覆盖现有的内联样式，您可以设置 style 对象的 cssText 属性。例如
element.style.cssText = 'color:red;background-color:yellow';
Code language: JavaScript (javascript)或者您可以使用 setAttribute() 方法
element.setAttribute('style','color:red;background-color:yellow');Code language: JavaScript (javascript)设置内联样式后，您可以修改一个或多个 CSS 属性
element.style.color = 'blue';Code language: JavaScript (javascript)如果您不想完全覆盖现有的 CSS 属性，您可以将新的 CSS 属性连接到 cssText，如下所示
element.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)在这种情况下，+= 运算符将新的样式字符串附加到现有样式字符串。
以下 css() 辅助函数用于从键值对对象设置元素的多个样式
function css(e, styles) {
for (const property in styles)
e.style[property] = styles[property];
}Code language: JavaScript (javascript)您可以使用此 css() 函数为 id 为 #content 的元素设置多个样式，如下所示
let content = document.querySelector('#content');
css(content, { background: 'yellow', border: 'solid 1px red'});Code language: JavaScript (javascript)以下示例使用 style 对象设置 id 为 content 的段落的 CSS 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Style Demo</title>
</head>
<body>
<p id="content">JavaScript Setting Style Demo!</p>
<script>
let p = document.querySelector('#content');
p.style.color = 'red';
p.style.fontWeight = 'bold';
</script>
</body>
</html>Code language: HTML, XML (xml)工作原理
- 首先，使用
querySelector()方法选择 id 为content的段落元素。 - 然后，通过设置
style对象的color和fontWeight属性来设置段落的颜色和字体粗细属性。
获取内联样式
style 属性返回元素的内联样式。它在实践中不太有用，因为 style 属性不会返回来自其他地方的规则，例如来自外部样式表的样式。
要获取应用于元素的所有样式，您应该使用 window.getComputedStyle() 方法。
摘要
- 使用
element.style对象的属性来设置 HTML 元素的内联 CSS 属性。
测验
本教程对您有帮助吗？
