隐藏时按id获取元素并显示：无答案

【问题标题】：Get element by id when it is hidden and display:none隐藏时按id获取元素并显示：无
【发布时间】：2019-06-06 22:59:42
【问题描述】：

我正在使用React，我正在尝试通过id 获取一个元素。我知道我应该为此使用ref，但我无法让它工作。但是，d3 有效：它获得了我想要的元素，但没有获得带有 visibility: hidden 和 display:none 的元素。是否可以让d3 选择隐藏元素？这是我拥有的部分代码：

<div style={{display: this.state.fullAnalysisDone && this.state.activeKey === 0 ? 'block' : 'none', 
      visibility: this.state.fullAnalysisDone && this.state.activeKey === 0 ? 'visible' : 'hidden'}}>
        {
        this.get_analysis_charts(this.chartTypes[this.state.activeKey]).map((chart_img, idx) => {
          return <img id = {'chart_' + this.state.activeKey + '_' + idx} src = {chart_img} style = {{width:"400px"}}
            onClick={() => this.clickedResultPageImg(idx)}/>
        })
      }
    </div>

当我尝试通过id 获取img 时：d3.select(chartId).node() 在隐藏的 div 中，我什么也得不到。这可能是stackoverflow 上未回答的相同问题：

getElementById() fails to get element when display:none

【问题讨论】：

如果元素在 DOM 中，你应该找到它，确保元素在 DOM 中并且你使用了正确的选择器。
当我在没有任何样式的情况下将所有图像添加到一个 div 中时，它可以正常工作，但使用 display:none 则不是
@NikitaVlasenko 在您的选择语句中chartId 的值是多少？是否有前导# 必须按id 选择？
是的，确实如此。它的形式为 #chart_0_0 、 #chart_0_1 等。
正如 rioV8 所示，这通常可以按预期工作。你能设置一个可执行的演示来复制这个问题吗？

标签： javascript reactjs d3.js

【解决方案1】：

在我的浏览器中，它适用于getElementById 和d3.select()，即使div 和p 都是{ display:none; visibility: hidden; }。

隐藏p 和隐藏img。

function changePara(paraId, newColor) {
  var elem = document.getElementById(paraId);
  console.log("changePara", paraId, elem);
  if (elem) { elem.style.color = newColor; }
}

function changeColor(newColor) {
  changePara('para1', newColor);
  changePara('para2', newColor);
}

function changeParaD3(paraId, newColor) {
  var elem = d3.select(`#${paraId}`);
  console.log("changeParaD3", paraId, elem.size());
  if (elem.size()) { elem.style("color", newColor); }
}

function changeColorD3(newColor) {
  changeParaD3('para1', newColor);
  changeParaD3('para2', newColor);
}

.nosee { display:none; visibility: hidden; }
#para2 { display:none; visibility: hidden; }

<script src="https://d3js.org/d3.v5.min.js"></script>

<div class="see"><p id="para1">Some text</p></div>
<div class="nosee"><img id="para2" src="https://cdn.sstatic.net/Img/unified/sprites.svg"/></div>


<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
<br/><br/>
<button onclick="changeColorD3('blue');">blue-d3</button>
<button onclick="changeColorD3('red');">red-d3</button>

【讨论】：