在CSS中設(shè)置on類，可以通過以下步驟實現(xiàn)：

1、在HTML元素中添加一個類名，quot;on"。

2、在CSS中定義"on"類的樣式規(guī)則。

如果你想讓添加"on"類的元素變成紅色，可以定義如下樣式規(guī)則：

.on {
  color: red;
}

這樣，所有添加"on"類的元素都會變成紅色，你也可以根據(jù)需要定義更復(fù)雜的樣式規(guī)則。

如果你使用的是React等前端框架，可以通過組件的state或props來控制"on"類的添加和移除，在React中，你可以定義一個組件的state來表示元素是否應(yīng)該添加"on"類：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true };
  }
  render() {
    return (
      <div className={this.state.isActive ? 'on' : ''}>
        Hello, World!
      </div>
    );
  }
}

這樣，當(dāng)組件的state中的"isActive"為true時，"on"類會被添加到div元素上，使其變成紅色，當(dāng)"isActive"為false時，"on"類不會被添加，div元素保持默認樣式。