HTML JavaScript试编写点击“按钮”让其他元素变宽，字变大，变颜色页面布局：在标签内添加事件的方法：方法名=“” 如：<input type="button" value="按钮" onclick="alert('a');" />

要在HTML中通过JavaScript实现当用户点击“按钮”时，其他元素改变宽度、字体大小和颜色，你可以这样做：首先，在HTML中创建一个按钮元素，并为其设置一个id属性以便于JavaScript引用，以及需要变化的其他元素，例如两个span元素用于显示文字。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动态样式</title> </head> <body> <input type="button" id="myButton" value="点击我" onclick="changeStyle()"> <p id="textElement">默认文本</p> <div id="widthElement" style="width: 100px;">默认宽度</div> <script src="script.js"></script> </body> </html> ``` 然后，在`script.js`文件中编写JavaScript函数`changeStyle()`: ```javascript function changeStyle() { // 获取需要变化的元素 const button = document.getElementById("myButton"); const textElement = document.getElementById("textElement"); const widthElement = document.getElementById("widthElement"); // 当按钮被点击时... button.style.backgroundColor = "blue"; // 改变按钮背景色 textElement.style.fontSize = "2em"; // 提升文本字号 widthElement.style.width = "200px"; // 增加元素宽度 // 可以在这里添加动画效果，如果需要的话 // 例如: // setTimeout(() => { // textElement.style.fontSize = "originalFontSize"; // 恢复原样 // widthElement.style.width = "originalWidth"; // 恢复原宽 // }, 2000); // 动画持续2秒后恢复 } ``` 在上述代码中，当用户点击按钮时，`changeStyle`函数会被调用，它会修改指定元素的样式。如果你希望有动画效果，可以加入相应的定时器来在一段时间后恢复初始状态。

阅读全文

HTML JavaScript试编写点击“按钮”让其他元素变宽，字变大，变颜色 页面布局： 在标签内添加事件的方法： 方法名=“” 如：<input type="button" value="按钮" onclick="alert('a');" />

最新推荐

JavaScript实现点击按钮字体放大、缩小

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

JavaScript动态改变HTML页面元素例如添加或删除

HTML页面原生VIDEO标签隐藏下载按钮功能

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

HTML JavaScript试编写点击“按钮”让其他元素变宽，字变大，变颜色页面布局：在标签内添加事件的方法：方法名=“” 如：<input type="button" value="按钮" onclick="alert('a');" />