如何通过javascript显示隐藏的div？

Question

如果div已关闭，我想隐藏javascript，如果div已启用，则显示javascript但我不想使用<noscript>就像在chrome和opera中一样，它有一些问题。所以我正在做的是这样的：

<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>

但是javascript部分没有显示div。如何启用javascript，我如何使其可见。还尝试了$('#box').show();，但这也没有用。

Answer 1

使用style.display

document.getElementById("box").style.display = "block";

Answer 2

您需要将属性display设置为block

document.getElementById("box").style.display = "block";

您正尝试在可见性之间切换，这种可见性类似，但属性不同。

Answer 3

您正在使用display：none，而不是visibility：hidden。 解决方案添加可见性：隐藏而不是显示无，如果您想使用它而不是显示。他们的工作有点不同。

Answer 4

您可以设置：

var Parent = React.createClass({
  getInitialState() {
    inputValue: ''
  },

  render() {
    return (
        <div>
            <Child onChange={this.onChange}></Child>
            <button onChange={this.onSubmit} type="button" />
        </div>
    );
  },

  onChange(e) {
    this.setState({ inputValue: e.target.value });
  },

  onSubmit() {
    //do your ajax operation with this.state.inputValue here
  }
});

var Child = React.createClass({
  getInitialState() {
    inputValue: ''
  },

  render() {
    return (
      <input
        type='file'
        onChange={this.props.onChange} />
    );
  }
});

在您的脚本代码中：

<div id='box' style='display: none;'>...</div>

Answer 5

将显示更改为可见性

document.getElementById('box').style.display = 'block';

或更改js

<div id="box" style="visibility:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>

Answer 6

你也可以混合使用CSS和Javascript来实现这个目标：

HTML / JavaScript的

<script type="text/javascript">
    document.documentElement.className += 'js-ready';
</script>

CSS

div#box { display: none; }
.js-ready div#box { display: block !important; }