Javascript getElementById在if语句中不工作-疑难解答

我有一个简单的JS脚本，可以为没有安装Flash的用户替换包含Flash的元素，并用其他格式替换它们

var hideclass="hidden"
var showclass="empty"


function flashFixMain(){    
if (swfobject.hasFlashPlayerVersion("7.0.0")) {

    document.getElementById('logoflash').className=showclass;
    document.getElementById('logononflash').className=hideclass;

} else {

    document.getElementById('logoflash').className=hideclass;
    document.getElementById('logononflash').className=showclass;

    }
}

简单地说，它不起作用

if语句工作正常-将警报放在适当的位置会很好地弹出。 我已经在线检查了相应页面的源代码，元素名称会像写的一样弹出，并且只弹出一次！。 类名工作正常，因为它们在页面开始时用作默认值。 有人知道我可能错过了什么吗

document.getElementById('logoflash').class=showclass;

到

它是className，不是class，而是using.class，您需要使用属性；例如：

document.getElementById('logoflash').className = showclass;

在现代浏览器中，您还可以使用添加类，而不是替换所有现有类：

document.getElementById('logoflash').classList.add(showclass);

作为一个旁白，你可以考虑像这样移动一些语句：

var hasFlash = swfobject.hasFlashPlayerVersion("7.0.0"),
logoFlash = document.getElementById('logoflash'),
logoNonFlash = document.getElementById('logononflash');

logoFlash.className = hasFlash ? showclass : hideclass;
logoNonFlash.className = hasFlash ? hideclass : showclass;

使用Jquery：

$("#logoflash").addClass(hideclass);

或

---

我写了一个快速测试场景，在没有看到更多您的环境的情况下，没有看到任何应该阻止它按预期工作的东西

我在使用jQuery写一篇文章时注意到了一件事，我猜您没有使用jQuery？您的“addClass”实际上是一个“REPLACE”类值。您只需将其设置为单个类

这让我想到，在没有看到您的环境的情况下，可能已经为您的元素分配了一些其他类，这些元素正在被删除。如果某些显示依赖于这些其他类，则可能会导致意外行为

在没有看到更多您的场景的情况下，这似乎是唯一一件可能成为问题的事情

无论如何，这是我的测试设置。你可能会发现这里面有些有用的东西

<div id="logoflash" class='something'>
    Logoflash
</div>

<div id="logononflash" class='else' >
    logononflash
</div>



<script>

var swfobject = {FlashPlayerVersion: '7.0.1', hasFlashPlayerVersion: function(v) {if(v == this.FlashPlayerVersion) return true; else return false;}, myName: 'fakeSWObject' };
console.log(swfobject)

var hideclass = "hidden"
var showclass = "empty"
var getById = function(sID) { return document.getElementById(sID); };
var addClass = function(sID, sClass) { getById(sID).className += ' ' + sClass  };

function toggleEl(sID, bState){
    console.log('begin toggleEl')
    console.log('bState: ' + bState)
    try {
        if(bState == undefined) {
            console.log('Toggling by element state');
            getById(sID).style.display = getById(sID).style.display == 'none' ? 'block' : 'none';
        } else {
            console.log('Toggling by argument');
            getById(sID).style.display = !!bState ? 'block' : 'none';
        }

    } catch (err) {
        console.log(err);
    }
}

function flashFixMain(){

  if (swfobject.hasFlashPlayerVersion("7.0.0")) {
    console.log('Is Flash 7.0.0');
    toggleEl('logoflash', true);
    toggleEl('logononflash', false);
    addClass('logoflash', hideclass);
    addClass('logononflash', showclass);

} else {
    console.log('Is NOT Flash 7.0.0');
    toggleEl('logoflash', true)
    toggleEl('logononflash', false)
    addClass('logoflash', showclass);
    addClass('logononflash', hideclass);
    }
}


$(function(){ // Yes, this is jQuery to fire after doc is ready
    flashFixMain();
})

</script>

---

你能提供更多的细节，比如你的html和css类定义吗。尝试使用$p.addClassmyClass yourClass；看看有没有什么不同。你有进一步的进展吗？您看到覆盖现有类是否是一个问题了吗？看到我的答案了吗？覆盖类不是问题，我倾向于使用额外的DIV标记来处理类似的事情。我发现，如果通过按钮调用，代码可以完美地工作——这似乎是一个问题，因为它是在window.onloadFinally sorted上调用的——一位同事建议我应该使用jquery ready，因为当我试图更改它们时，元素并不存在！我不敢相信我漏掉了这个-但是在把它改成正确的格式后，它仍然不起作用，所以我认为还有其他问题。@MattBowyer-它似乎也起作用了，除此之外，测试这个不容易？这个问题没有用jQuery标记。我不看这个。很抱歉，不用担心，它发生了：

$('#logoflash').toggleClass(hideclass, swfobject.hasFlashPlayerVersion("7.0.0"));

<div id="logoflash" class='something'>
    Logoflash
</div>

<div id="logononflash" class='else' >
    logononflash
</div>



<script>

var swfobject = {FlashPlayerVersion: '7.0.1', hasFlashPlayerVersion: function(v) {if(v == this.FlashPlayerVersion) return true; else return false;}, myName: 'fakeSWObject' };
console.log(swfobject)

var hideclass = "hidden"
var showclass = "empty"
var getById = function(sID) { return document.getElementById(sID); };
var addClass = function(sID, sClass) { getById(sID).className += ' ' + sClass  };

function toggleEl(sID, bState){
    console.log('begin toggleEl')
    console.log('bState: ' + bState)
    try {
        if(bState == undefined) {
            console.log('Toggling by element state');
            getById(sID).style.display = getById(sID).style.display == 'none' ? 'block' : 'none';
        } else {
            console.log('Toggling by argument');
            getById(sID).style.display = !!bState ? 'block' : 'none';
        }

    } catch (err) {
        console.log(err);
    }
}

function flashFixMain(){

  if (swfobject.hasFlashPlayerVersion("7.0.0")) {
    console.log('Is Flash 7.0.0');
    toggleEl('logoflash', true);
    toggleEl('logononflash', false);
    addClass('logoflash', hideclass);
    addClass('logononflash', showclass);

} else {
    console.log('Is NOT Flash 7.0.0');
    toggleEl('logoflash', true)
    toggleEl('logononflash', false)
    addClass('logoflash', showclass);
    addClass('logononflash', hideclass);
    }
}


$(function(){ // Yes, this is jQuery to fire after doc is ready
    flashFixMain();
})

</script>