返回意外值的JavaScript自定义函数

我有一组

style.display

、

firstChild.data

和

innerHTML

值，可以在两个选项之间切换，并为此创建了一个帮助函数。它是：

function htmlToggle(elem, prop, newVal, oldVal){
    elem[prop] == oldVal ? elem[prop] = newVal : elem[prop] = oldVal;
}

这对我所有的元素（大约10个）都有效，除了最新的一个。当我尝试切换它的显示时，什么也没有发生，即使我在之后立即切换另一个div的显示，并且成功地工作（将这个div关闭，因为它无法关闭）

我使用

console.log

进行了一些调试，发现仅此元素在到达函数时，

elem[prop]=“

。所有其他元素都具有我所期望的（应该是

elem[prop]==oldVal=>true

，开始）

关于这是为什么有什么想法吗？以下是非工作元素的标记：

<div id="text-div" style='display:none'></div>

因此，在调用之后，它的样式是

'display:block inline'

，这就是我将在

htmloggle

中用作

oldVal

参数的样式

htmlToggle(document.getElementById('text-div').style, 'display', 'none', 'block-inline');

请注意，此元素在一个节中与另一个div内联，在

#text div

转到

display:none

后，该div将扩展到它们共享的行的100%

部分

，

文本div

，以及行中另一个div（

映射

）的CSS如下所示：

section {
  width: 98%;
  height: 750px;
  background: RGB(240,240,240);
  margin: auto;
  padding: 10px;
} 

div#map { 
  width: 100%;
  height: 750px;
  float: left;
  position: relative;
}

div#text-div {
  margin-left: 76%;
  width: 23%;
  height: 750px;
  background: RGB(240,240,240);
  overflow: scroll;
}   

---

我一直在使用这个函数和这个模式，没有任何问题。这让我很难受。我总是可以不使用我的助手函数，装配一些布尔值来告诉我手动切换哪个值，然后这样做。但是，我真的很想理解为什么这不起作用，即使我最终使用了一种变通方法。

将其从

block inline

更改为

inline block

，如下所示：

函数htmlToggle（元素、属性、新值、旧值）{
元素[prop]==oldVal？元素[prop]=newVal:elem[prop]=oldVal；
}
函数切换_测试（）{
htmlToggle（document.getElementById（'text-div'）。样式为'display'，'none'，'inline block'）；
}

BLAHBLAH
TEST

document.getElementById（'text-div'）。style='display:block inline'；不是通过javascript设置样式的正确方法。这可能会覆盖元素上的所有其他样式。您应该改为：

document.getElementById('text-div').style.display = 'inline-block';

---

display:block inline

应该是

display:inline block

和

id

不应该包含

-

（连字符）。@ScottMarcus在ids中连字符没有问题。@ScottMarcus在JavaScript中也可以，这当然取决于您如何使用它们……；）这是一个切换，不管当前值是什么。问题在于block-inline的使用。是我，还是标题（新旧）有误导性？所讨论的

htmlToggle

函数没有返回任何内容，因此它不可能返回意外值。。。

document.getElementById('text-div').style.display = 'inline-block';