Setting inline styles
To set the inline style of an element, you use the style property of that element:
element.styleCode language: CSS (css)The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red, you use the following code:
element.style.color = 'red';Code language: JavaScript (javascript)If the CSS property contains hyphens (-) for example -webkit-text-stroke you can use the array-like notation ([]) to access the property:
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 |
要完全覆蓋現有的 inline style，請設置對象的cssText屬性style。例如：
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)設置 inline style 後，您可以修改一個或多個 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 的段落的 CSS 屬性content：
<!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)這個怎麼運作：
content首先，使用方法選擇id為的段落元素 querySelector()。- 然後，通過設置對象的
color和fontWeight屬性來設置段落的顏色和字體粗細屬性style。 querySelector()是由 Selectors API 引入的選擇器。
傳入querySelector的字串參數必須遵循 CSS 語法。若要選取未遵循 CSS 語法的 ID 或選擇器（例如不當使用冒號或空格），必須強制加上兩個反斜線來跳脫錯誤的字元：
獲取內聯樣式
該style屬性返回元素的內聯樣式。它在實踐中不是很有用，因為該style屬性不返回來自其他地方的規則，例如來自外部樣式表的樣式。
要將所有樣式應用於元素，您應該使用該window.getComputedStyle()方法。
概括
- 使用
element.styleobject 的屬性來設置 HTML 元素的內聯 CSS 屬性。
0 意見
張貼留言