Question

我有一堆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>

在一个始终在切换之前的回调中，其样式将重置为以下内容：

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

所以在那次调用之后，它的样式是'display:block-inline'，然后我将其用作oldVal中的htmlToggle参数。这是对htmlToggle的调用：

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

请注意，此元素在一个部分中是内联的，带有另一个div，在#text-div转到display:none后，它将扩展到他们共享的行的100％。

section，text-div的CSS以及其行（map）中的另一个div位于：

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;
}

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

Answer 1

只需将其从block-inline更改为inline-block即可：

function htmlToggle(elem, prop, newVal, oldVal) {
  
  elem[prop] == oldVal ? elem[prop] = newVal : elem[prop] = oldVal;
}

function toggle_test() {
  htmlToggle(document.getElementById('text-div').style, 'display', 'none', 'inline-block');
}

<div id="text-div" style='display:none'>BLAHBLAH</div>
<button onclick="toggle_test();">TEST</button>

Answer 2

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

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

JavaScript自定义函数返回意外值

2 个答案: