4.7 根据状态展示不同样式按钮

在某些HTML页面应用中，设计人员需要根据特定状态将页面中的按钮展示出不同的风格，此时就需要通过JavaScript来动态改变按钮的样式。下面给出一个通过JavaScript实现根据状态展示不同样式按钮的代码实例。

关于【代码4-6】的说明：

● 第14行代码通过<button id="id-btn-status">标签定义一个按钮，用于演示按钮的不同状态。

● 第15行代码定义的<p>标签用于显示按钮当前的状态。

● 第17～20行代码通过<button>标签分别定义了4个按钮，用于切换第14行代码中定义的<button id="id-btn-status">按钮的状态。

● 第24～34行、第35～45行、第46～56行、第57～67行代码分别定义了第17～20行代码中4个按钮的onclick事件处理方法。其中，使用disabled属性定义按钮是否被禁用，使用innerText属性定义按钮不同状态下的显示内容，使用color、fontWeight和backgroundColor属性分别定义按钮不同状态下的样式。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.6所示。

如图4.6中所示，4个页面中分别展示了按钮的4种状态（正常状态、运行状态、停止状态和禁用状态）。