使用 Javascript 向 YouTube iframe 元素添加类答案

【问题标题】：Using Javascript to add class to YouTube iframe element使用 Javascript 向 YouTube iframe 元素添加类
【发布时间】：2012-02-28 12:47:00
【问题描述】：

我在一个拥有大量文章的网站上工作。不少人通过 YT 嵌入代码嵌入了一个或多个 YouTube 视频。

由于设计发生了变化，以前嵌入视频的高度和宽度不再符合新设计。因此，我使用 CSS 定位 iframe 以显示正确的尺寸。这很好用，但还有其他 iframe 对象（例如 Soundcloud 播放器）会无意中调整大小。由于 YT 或 SC 嵌入代码没有类，我不能针对一种嵌入代码，而对另一种保持不变。

是否可以使用 js 只为 YouTube iframe 元素添加一个类，而其他 iframe 元素保持原样？

【问题讨论】：

【解决方案1】：

您可以使用属性选择器轻松做到这一点：

$("iframe[src^='http://www.youtube.com']").addClass("myClass");

其他信息

看看jQuery's attribute selector reference。以下是简要介绍：

=  is exactly equal
!= is not equal
^= starts with
$= ends with
*= contains

【讨论】：

令人惊讶的是，jQuery 让事情变得如此简单（以及它让我看起来多么愚蠢）。非常感谢您指出这一点！
你实际上根本不需要使用 jQuery，属性选择器不仅限于 jQuery，而且适用于所有现代（甚至不是那么现代）的浏览器。
@powerbuoy，你是对的。事实上，我链接到的 jQuery 文档引用了他们使用 css 选择器的事实 - The CSS specification also allows elements to be identified by their attributes. While not widely supported by browsers for the purpose of styling documents, these attribute selectors are highly useful, and jQuery allows us to employ them regardless of the browser being used.。由于 jQuery JS & jQuery 被标记，而 CSS 没有，我选择提供一个 jQuery 示例。
我想这需要 javascript 或 jquery，但肯定也可以使用 CSS 选择器。再次感谢！
好的，应该注意的是，虽然使用纯 CSS（IE7 及更高版本都可以使用）将比使用 JS 快几倍。

【解决方案2】：

也许你可以使用一个属性选择器，像这样：

iframe[src^="http://www.youtube"]

【讨论】：