Question

问候同伴Stackoverflowers。我试图通过使用JavaScript单击按钮来更改文本，图像和颜色。有没有有效的方法来做到这一点？这是My example Website。我试图用一个按钮让爱德华·斯诺登的图像，描述和列表更改，然后再次点击时恢复为原始版本！谢谢你的帮助！

Answer 1

这样做实际上相当简单。以下是该做什么以及如何做的示例：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>

<script>
function change() {
    document.getElementById("image").src = "image2.jpg";
    document.getElementById("text").innerHTML = "new text";
}
</script>

</body>
</html>

您使用ID声明元素并使用onclick事件创建一个按钮。单击该按钮后，它将运行change()功能，该功能会将image src更改为image2.jpg和text＆＃39 ;文字为new text。

如果你想让它改回来，你可以试试这样的事情：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>

<script>
var element1;
var element2;

function change() {

    element1 = document.getElementById("image")
    element2 = document.getElementById("text")

    if ( element1.src == "image2.jpg" ) {
        element1.src = "image1.gif"
        element2.innerHTML = "Old text"
    } else {
        element1.src = "image2.jpg"
        element2.innerHTML = "new text"
    }

}
</script>

</body>
</html>

Answer 2

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
import { BluetoothSerial } from '@ionic-native/bluetooth-serial';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {

  constructor(public alertCtrl:AlertController,
              public bluetoothSerial: BluetoothSerial) {

  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'TITLE HERE',
      subTitle: 'RANDOM',
      buttons: ['OK']
    });
    alert.present();
  }

使用JavaScript DOM更改页面元素

2 个答案: