单击更改iframe元素的类

Change class of iframe element on click

本文关键字：元素 iframe 单击      更新时间：2023-09-26

我有一个特定类的iframe（嵌入声音云的音轨）。我想要的是，当我点击iframe时，它的类会变成另一个具有不同属性的类。

我的代码是：index.html

<script src="javascripts/jquery.min.js"></script>
<iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&amp;color=00ffc6&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_artwork=false&amp;show_reposts=false"></iframe>
<script>
  $('#soundcloudtrack').click(
     function (v) {
       $(this).toggleClass('soundcloud soundcloudext');
       /*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
     }
  );
</script>

和style.css:

.soundcloud{
    z-index:99997;
    width:100%;
    height:62px;
    opacity:0.25;
}
.soundcloudext{
    z-index:99997;
    width:100%;
    height:135px;
    opacity:1;
  }

但它不起作用，我不明白为什么。我也尝试过使用getElementById。你能帮忙吗？

你不能像I.G所说的那样直接针对iframe，你需要在你的网页上设置一些你可以控制的东西，我在jsfiddle上写了一些东西，请试着看看这是否是你想要的：https://jsfiddle.net/652ejv6j/#run.

<div id="player">
  <span>click here</span>
  <iframe class="soundcloud" id="soundcloudtrack" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123888618&amp;color=00ffc6&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_artwork=false&amp;show_reposts=false"></iframe>
</div>

 $('#player span').click(function() {
 //alert(1);
 $("#soundcloudtrack").toggleClass('soundcloud soundcloudext');
    alert($("#soundcloudtrack").attr("class"));
  /*document.getElementById("soundcloudtrack").className = "soundcloudext";*/
});
.soundcloud {
  z-index: 0;
  width: 100%;
  height: 62px;
  opacity: 0.25;
}
.soundcloudext {
  z-index: 99997;
  width: 100%;
  height: 135px;
  opacity: 1;
}
#player {
  position: relaitve;
  z-index: 999;
  width: 100%;
  height: auto;
}
#player span {
  position: absolute;
  height: 20px;
  top: 40px;
  opacity: 0;
  z-index: 999;
  text-align: center;
  width: 100%;
}

ALT检查您的玩家是否有API可以直接控制。

相关文章：