无法使用 javascript 更改显示属性

Can't change display property with javascript

本文关键字：显示 属性 javascript      更新时间：2023-09-26

>我正在尝试获取一个对象（嵌入式抽搐流）以在单击图像时显示。一切似乎都运行良好，除非我尝试更改其显示属性。默认情况下，它设置为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>

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

理论上，对象应该可以使用 css 属性进行样式设置。但是像flash和java小程序这样的对象是由它们各自的代码绘制的，有时浏览器对它没有太多控制权。

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

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

现在，您的代码应该按编写的方式工作。

尝试将 JavaScript 代码替换为以下内容：

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

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

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

如果你不介意使用jQuery，这里有一个简单的解决方案

function showDiv(){
   $('#twitchStream').show();
};
相关文章：