4、展示与行为：CSS和事件处理的艺术

展示与行为：CSS和事件处理的艺术

1. 通过JavaScript更改展示层

在现代Web开发中，HTML文档中的每个元素都有一个 style 属性，它包含了所有视觉属性。你可以读取或写入该属性的值来立即改变元素的外观和风格。例如：

<style type="text/css">
    /* CSS styles */
</style>
<script type="text/javascript">
    // JavaScript code to change style
    var element = document.getElementById('myElement');
    element.style.backgroundColor = 'red';
</script>

尽管直接设置 style 属性是可行的，但它并不是最佳实践，因为这会混淆行为层和表现层，增加维护难度。更好的做法是通过动态改变元素的 class 属性来应用或移除样式。

动态改变类属性

你可以通过修改元素的 className 属性来应用或移除样式。例如：

var n = document.getElementById('nav');
n.className = 'dynamic';