如何使用Javascript或JQuery更改HTML IFrame元素属性

Question

Having a challenge currently with this kind of html iframe element. I have this CSS snippet in my HTML file like this:

...
<style>
iframe[src^="https://apis.google.com"] {
display: none;
}
</style>
...

Does any one know how I can change the display to "visible" for this iframe[src^="https://apis.google.com"] { display: none; } iframe[src^="https://apis.google.com"] { display: none; } element using javascript or jquery onclick function?

Answer 1

First, give the iframe an id attribute, like id="iframeid". Then, run this javascript:

document.getElementById("iframeid").style.display = "visible";

Answer 2

Element without display style is displayed by block . When using jquery's .show() , it changes element's display to block . Easy and simple in jquery:

$('#link').click(function() {
  $('iframe[src="https://apis.google.com"]').show();
});