使用js通过添加按钮,实现更改元素内容、样式、属性,如变换某处字的字号和颜色,交换图片
时间: 2024-04-21 17:29:19 浏览: 18
好的,我可以为您提供一些基本的代码示例。首先,我们需要添加一个按钮,然后为其添加点击事件,当点击按钮时,我们可以通过 JavaScript 改变元素的内容、样式和属性。
比如,下面是一个可以改变某个元素字号和颜色的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Button example</title>
<style>
#text {
font-size: 24px;
color: black;
}
</style>
</head>
<body>
<p id="text">Hello, world!</p>
<button onclick="changeStyle()">Change style</button>
<script>
function changeStyle() {
var text = document.getElementById("text");
text.style.fontSize = "36px";
text.style.color = "red";
}
</script>
</body>
</html>
```
当你点击按钮时,它会调用 `changeStyle()` 函数,该函数会获取 `id` 为 `text` 的元素,并将其字号和颜色更改为我们指定的值。
同样的,我们可以通过 JavaScript 来交换图片。比如下面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Button example</title>
<style>
#img1, #img2 {
display: inline-block;
width: 200px;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<img id="img1" src="image1.jpg">
<img id="img2" src="image2.jpg">
<button onclick="swapImages()">Swap images</button>
<script>
function swapImages() {
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var temp = img1.src;
img1.src = img2.src;
img2.src = temp;
}
</script>
</body>
</html>
```
这里我们有两张图片,它们分别有不同的 `id`。当你点击按钮时,它会调用 `swapImages()` 函数,该函数会获取这两张图片元素,并将它们的 `src` 属性交换。这样,图片就被交换了。
希望这些示例代码能够帮到您!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)