使用JavaScript点击按钮改变Div宽度高度并修改背景颜色的方法

简介：
本教程详细介绍了如何利用JavaScript实现通过点击按钮来调整网页中div元素的尺寸及更改其背景色的效果。 标题“JS实现点击按钮控制Div变宽、增高及调整背景色的方法”中的知识点主要涉及在JavaScript（JS）中如何通过点击按钮来动态调整页面中一个特定的Div元素的宽度、高度以及背景颜色。这些操作通过改变DOM（文档对象模型）元素的CSS样式来实现，可以应用于创建动态用户界面交互效果，比如网页主题切换或皮肤更换功能。 描述指出这个方法适用于动态更换页面皮肤的功能，说明了这种技术在实际开发中的一种应用场景。它能够帮助开发者通过简单的操作（如点击一个按钮）改变页面外观，从而提升用户体验。 标签“JS 点击按钮 控制 Div变宽 增高 调整背景色”概括了文章所涵盖的知识点。 内容部分具体描述实现上述功能的技术细节： 1. 页面中的按钮设置了点击事件监听器。当按钮被点击时执行预定义的函数（funClick），该函数接受两个参数：btnID（按钮DOM对象）和changeClass（要添加或移除的CSS类名）。 2. 函数funClick的功能是获取按钮父级元素的父级元素，即目标Div元素。然后检查这个Div元素class属性是否包含指定的CSS类名（changeClass）。如果未包含，则将该类名添加进去；已包含则将其移除。这样通过切换CSS类来实现宽度、高度和背景色调整。 3. 使用不同的CSS类如.divWidth、.divHeight和.divBgColor，控制Div在不同状态下的显示样式：使用.divWidth设置400px的宽度，用.divHeight设定400px的高度，并以#DCF3B1为背景颜色。 4. 在