button按钮,填充内容为鼠标左键单击,写一个div设置宽高为200px,背景颜色为红色。 单击后讲div背景颜色变为粉色。
时间: 2024-05-06 10:21:31 浏览: 22
这是一个关于前端开发的问题,我可以回答。可以使用以下代码实现:
```
<div id="myDiv" style="width: 200px; height: 200px; background-color: red;">
<button onclick="changeColor()">button</button>
</div>
<script>
function changeColor() {
document.getElementById("myDiv").style.backgroundColor = "pink";
}
</script>
```
当单击按钮时,调用`changeColor`函数,将div的背景颜色设置为粉色。
相关问题
一个宽高为200px的div,如何设置,可以让div在5s内旋转一周
可以使用CSS3的动画属性来实现:
```
div {
width: 200px;
height: 200px;
background-color: red;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
在上面的代码中,我们定义了一个名为“rotate”的动画,从0度旋转到360度,用于让div旋转一周。然后,我们将这个动画应用在div上,并设置它在5秒内线性无限循环播放。
写一个油猴脚本,功能是在网页中插入一个宽为100,高为100的按钮
好的,以下是一个简单的油猴脚本,可以在网页中插入一个宽为100,高为100的按钮:
```javascript
// ==UserScript==
// @name Add button to page
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add button to page with width 100 and height 100
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create a button element
const button = document.createElement('button');
button.style.width = '100px';
button.style.height = '100px';
button.innerText = 'Click me!';
// Append the button to the body of the page
document.body.appendChild(button);
})();
```
你可以将这段代码复制到一个新建的油猴脚本中,然后保存并安装它。在你想要添加按钮的网页中,你应该能够看到一个宽为100,高为100的按钮。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)