Question

如何使用JavaScript或jQuery或Angular动态更新“非常规”（用例不多）HTML元素属性？

我尝试使用[src]="cvv“（角度），但似乎运气不佳。我什至不确定所有这些属性或属性是否可以动态更新。

示例：如何更新下面表单元素中的action="" URL和target属性？

<form class="wpwl-form" action="https://test.oppwa.com/v1/checkouts/EB477281A6AA/payment" method="POST" target="card_1270556498138">

如何更新下面src的{{1}}属性？

iframe

Answer 1

您可以使用setAttribute

var b = document.querySelector("button"); 

b.setAttribute("name", "helloButton");

取自MDN Web Docs

您可以使用以下

var form = document.querySelector(".wpwl-form")[0];
var iframe = document.querySelector(".wpwl-control")[0];

form.setAttribute("action", "value for action");
form.setAttribute("target", "value for target");

iframe.setAttribute("src", "value for src");

无法进行测试，但是应该可以。

Answer 2

在

这样的角度属性绑定中，我看不到任何问题

<form class="wpwl-form" [action]="url" method="POST" [target]="target">

其中url和target是在component.ts中定义的属性，例如

url='https://test.oppwa.com/v1/checkouts/EB477281A6AA/payment';
target='card_1270556498138'

check this demo

Answer 3

使用Angular，您可以将HTML属性绑定到变量，更新此变量将更新属性。在您的示例中，应使用[action]和[src]而不是action和src。

示例： <iframe class="wpwl-control" frameborder="0" [src]="myIframSrc"></iframe>

Answer 4

如果您使用的是角度，则不应在表单元素中使用动作标签，而应使用角度方式。当在src中绑定网址时，角度会认为该网址为不安全网址。为确保您绑定的是安全网址，您应该使用DomSanitizer，因此请将该网址标记为安全。

component.ts

 srcUrl: string = "https://www.youtube.com/embed/Fdf5aTYRW0E";
  safeUrl;
  constructor(private sanitizer: DomSanitizer) {
    const url = this.sanitizer.sanitize(SecurityContext.URL, this.safeUrl);
     this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.srcUrl);
  }

Example

Answer 5

将参考变量添加到iframe中，并使用ts文件中的ViewChild对其进行访问。使用该变量，您可以修改属性。

build

如何动态更新“非常规” HTML元素属性？

5 个答案: