Question

我的功能是：

function onClickChange() {
  let MyDiv = document.getElementById('myDIV')
  if (MyDiv.style.display === 'none') {
    MyDiv.style.display = ''
  } else {
    MyDiv.style.display = 'none'
  }
}

我的div是：

<div id="myDIV"> Hello world</div>

<div id="backgroundColor" onClick={onClickChange}>I am div with image and I need a background color change toggle functionality based on "myDIV" toggle functionality</div>

仅作为参考，我正在使用CSS“样式组件”。有人可以提供帮助吗？提前致谢！快乐编码：D

Answer 1

在这种情况下，您可以轻松地使用state。

示例：

渲染方法：

<div className={this.state.myClass} onClick={onClickChange}>I am div..</div>

onClickChange：

 onClickChange() {
      const {myClass} = this.state // read state first
      if (myClass === 'red') {
        this.setState({myClass: 'black'}) // set some black class name
      } else {
        this.setState({myClass: 'red'}) // set some red class name
      }
    }

状态更改后，将自动调用渲染方法。

请不要在document.getElementById('myDIV')的反模式中使用REACT。

Answer 2

检查以下代码，以更改背景色，您可以使用style.backgroundColor来单击div

function onClickChange(obj) {
  let MyDiv = document.getElementById('myDIV');
  //element.classList.toggle('mystyle');
  if (MyDiv.style.display === 'none') {
    MyDiv.style.display = ''
    obj.style.backgroundColor="red";
  } else {
    MyDiv.style.display = 'none'
    obj.style.backgroundColor="blue";
  }
}

<div id="myDIV"> Hello world</div>

<div id="backgroundColor" onClick="onClickChange(this)">I am div with image and I need a background color change toggle functionality based on "myDIV" toggle functionality</div>

我正在执行切换，并且当切换功能启动时，我想更改div的背景颜色更改

2 个答案: