选择某个CSS时,是否可以播放YouTube视频？

Question

我正在寻找一种方法,可以从下拉菜单中选择某个CSS时显示和播放不同的YouTube视频.我以为JavaScript可以用来检查CSS.

添加到页面的html标题.

<script type="text/javascript" src="=./javascript/playvid4css.js"></script>

例如/ CSS

red.css
blue.css

红色播放
蓝色戏剧

也许div可以在html中添加一个文件来显示视频.

<div id="yvideo"></div>

#

youtube嵌入代码.

旧的嵌入代码:

<object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/N9ync7sLSd4?version=3&amp;hl=en_GB&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

youtube iframe代码:(可能是他们将来尝试用于所有视频的代码)

<iframe width="420" height="315" src="http://www.youtube.com/embed/N9ync7sLSd4?rel=0" frameborder="0" allowfullscreen></iframe>

#

任何想法如何将JavaScript连接到CSS以便显示不同的youtube,或者有更简单的方法吗？

Answer 1

看一下document.styleSheets- 它是与您的网页关联的样式表数组（有序列表）。您可以在这里找到参考：

https://developer.mozilla.org/en/DOM/stylesheet

该disabled属性表明是否已应用给定的样式表。

因此，您可以迭代样式表，当您遇到红色或蓝色时，检查它们是否已应用（未禁用）。

var i;
for (i = 0; i < document.styleSheets.length; i++)
    if (document.styleSheets[i].href == "myRedStyleSheet.css" && 
        !document.styleSheets[i].disabled) {

            // code for the red stylesheet

    } else if (document.styleSheets[i].href == "myBlueStyleSheet.css" && 
               !document.styleSheets[i].disabled) {

            // code for the blue stylesheet
    }