div 中class与className区别

在 HTML 中，我们可以使用 class 和 className 来为元素添加 CSS 样式。它们的区别在于：

- class 是 HTML 属性，用于指定元素的一个或多个类名，多个类名之间用空格分隔。
- className 是 DOM 元素的属性，用于获取或设置元素的类名，可以通过 JavaScript 修改。

例如，下面的代码展示了如何为一个 div 元素添加两个类名：

<div class="box red"></div>

var elem = document.querySelector('.box');
elem.className = 'box blue'; // 将类名从 'red' 改为 'blue'

需要注意的是，通过 className 修改类名时会覆盖原有的所有类名，因此应该先获取原有的类名，再添加或删除需要的类名。

相关问题

class App extends React.Component { state = { month: '三月', day: '28', once: '学习React', twice: '40分钟' } render () { return ( <div className="one"> <div className="two"> <div className="date"> <div className="month">{this.state.month}</div> <div className="day">{this.state.day}</div> </div> <div className="content"> <div className="once">{this.state.once}</div> <br/> <div className="twice">{this.state.twice}</div> </div> </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('root'))

这是一个 React 组件，它会在页面上渲染一个日历和待办事项列表。组件中的 state 包含了月份、日期、一次性任务和二次性任务。在 render 方法中，通过 JSX 语法将这些数据渲染到了页面上。其中，className 用于指定样式类名，div 标签用于表示页面上的元素。最后，通过 ReactDOM.render 方法将组件渲染到了页面上。

class Login extends React.Component { state = { play: false, }; getphone = (value) => { console.log(value.length); if (value.length == 11) { this.setState({ play: true, }); } else { this.state.play = false; } }; render() { return ( <div className="login"> <div className="login_head"> <img src={backgroundimg} alt="" /> <div className="headleft"> <Cross></Cross> </div> <div className="headbottom"> <div className="bot_fir">手机号登陆</div> <div className="bot_sec">未注册手机验证后即完成注册</div> </div> </div> <div className="login_sec"> <div className="sec_fir">手机号</div> <input type="text" placeholder="请输入手机号" onChange={(e) => { this.getphone(e.target.value); }} /> <button disabled={this.state.play ? true : false} onClick={() => { console.log("111"); }} > 发送验证码 </button> </div> </div> ); } } export default withRouter(Login);

这段代码是一个React组件，主要实现了一个手机号登陆的功能。在手机号输入框中，当输入的手机号长度为11位时，发送验证码的按钮才可以点击，否则按钮被禁用。

具体实现的步骤如下：

1. 在组件的state中添加一个名为play的状态，初始值为false，表示发送验证码的按钮不可点击。

state = {
  play: false,
};

2. 在手机号输入框的onChange事件处理函数中，通过获取输入框的值，判断手机号长度是否为11位。如果是，则将play状态设置为true，否则设置为false。

getphone = (value) => {
  console.log(value.length);
  if (value.length === 11) {
    this.setState({
      play: true,
    });
  } else {
    this.setState({
      play: false,
    });
  }
};

3. 在发送验证码的按钮中，通过state中的play状态来控制按钮是否可以点击。如果play状态为true，则按钮被禁用，否则按钮可以点击。

<button
  disabled={this.state.play ? true : false}
  onClick={() => {
    console.log("111");
  }}
>
  发送验证码
</button>

这样就可以实现在手机号输入框输入11位手机号时，发送验证码的按钮才可以点击的功能。