以下是一个简单的示例，演示如何使用 JavaScript 和 HTML DOM 操纵元素的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Object Example</title>
<style>
/* 初始样式 */
#myElement {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 示例的元素 -->
<div id="myElement">This is my element.</div>
<script>
// 获取元素的引用
var element = document.getElementById('myElement');
// 获取元素的样式对象
var style = element.style;
// 输出初始样式
console.log('Color:', style.color);
console.log('Font Size:', style.fontSize);
// 修改样式
style.color = 'red';
style.fontSize = '20px';
// 输出修改后的样式
console.log('Updated Color:', style.color);
console.log('Updated Font Size:', style.fontSize);
</script>
</body>
</html>
在这个例子中，我们创建了一个 <div> 元素，并通过 JavaScript 获取了该元素的引用。然后，通过 style 属性获取了元素的 CSSStyleDeclaration 对象。我们输出了元素的初始样式，然后通过修改 style 对象中的属性来改变元素的样式。
style 对象提供了对元素内联样式的访问和修改。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6232/JavaScript 和 HTML DOM