我正在寻找一种方法,可以从下拉菜单中选择某个CSS时显示和播放不同的YouTube视频。我以为JavaScript可以用来检查CSS。
添加到页面的html标题。
<script type="text/javascript" src="=./javascript/playvid4css.js"></script>
例如/ CSS
red.css
blue.css
可能会在html中添加div
文件以显示视频的位置。
<div id="yvideo"></div>
youtube嵌入代码。
旧嵌入代码:
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/N9ync7sLSd4?version=3&hl=en_GB&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&hl=en_GB&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, 或者有更简单的方法吗?
答案 0 :(得分: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
}
答案 1 :(得分:0)
我假设您使用下拉列表更改包含的css ..如果是..然后在同一个选定的事件上,您读取更改的值并更改.CSS文件,您也可以删除旧的iframe并添加新的。那很容易......通过使用JQUERY来实施