Question

我正在尝试获取一个对象（嵌入式抽搐流）来显示何时单击图像。除非我尝试更改其显示属性，否则一切似乎都正常工作。默认情况下设置为display: none;，单击时会更改为display: block;。

HTML

<object id="twitchStream" class="center" .... </object>
<a href="#" onClick="showDiv()"><img class="center" src="img/hsl_arrow.png" /></a>

CSS

#twitchStream{
    display: none;
}

object.center{
    margin-left: auto;
    margin-right: auto;
    width: 620px;
}

的JavaScript

function showDiv() {
    document.getElementById('twitchStream').style.display = "block";
}

修改

对象的内容

<object id="twitchStream" class="center" 
type="application/x-shockwave-flash" height="378" 
width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/
live_embed_player.swf?channel=hsstarleague" bgcolor="#000000"><param 
name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" />
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=hsstarleague&auto_play=true&start_volume=25" /></object>

我很抱歉格式化，我复制并粘贴它并且遇到了一些麻烦。

Answer 1

尝试使用以下代码替换您的JavaScript代码：

window.showDiv = function() {
  document.getElementById('twitchStream').style.display = "block";
}

小提琴：http://jsfiddle.net/3rCHJ/。

P.S。请不要在生产中这样做 - 污染全局命名空间非常非常糟糕。

Answer 2

理论上，对象应该具有css属性的样式。但像flash和java applet这样的对象是由它们各自的代码绘制的，有时候浏览器对它没有多少控制权。

一种解决方案是将您的对象放在自己的div中，然后隐藏该div。众所周知，这个技巧非常可靠，应该适用于flash：

<div id="twitchStream">
    <object id="twitchStreamObject">...</object>
</div>

现在你的代码应该按照书面形式工作。

Answer 3

如果您不介意使用jQuery，这是一个简单的解决方案

function showDiv(){
   $('#twitchStream').show();
};

无法使用javascript更改显示属性

3 个答案: