HTML新手求助：为家居自动化仪表盘添加状态图标与切换按钮

下面给你两种实用的实现方式，适配静态展示和动态切换状态的场景：

方式一：CSS类绑定背景图标（推荐用于动态状态） #

这种方式通过类名控制图标显示，后续用JavaScript切换状态会非常方便。

1. 先写好CSS样式，把你的图标设置为背景图：

/* 房间状态样式 */
.room-status.on {
  background: url('bulb-on.png') no-repeat left center;
  padding-left: 30px; /* 给图标预留空间，数值根据图标大小调整 */
  line-height: 24px; /* 和图标高度对齐，保持垂直居中 */
}
.room-status.off {
  background: url('bulb-off.png') no-repeat left center;
  padding-left: 30px;
  line-height: 24px;
}

/* 门状态样式 */
.door-status.open {
  background: url('door-open.png') no-repeat left center;
  padding-left: 30px;
  line-height: 24px;
}
.door-status.closed {
  background: url('door-closed.png') no-repeat left center;
  padding-left: 30px;
  line-height: 24px;
}

2. 给现有<li>元素添加对应的类名：

<ul class="dashboard-list">
  <!-- 房间状态项 -->
  <li class="room-status on">客厅</li>
  <li class="room-status off">主卧</li>
  <!-- 门状态项 -->
  <li class="door-status open">入户门</li>
  <li class="door-status closed">阳台门</li>
</ul>

如果需要动态切换状态，比如用户点击后改变房间开关，用一行JS就能实现：

// 切换主卧状态：从off改成on
document.querySelector('.room-status.off').classList.replace('off', 'on');

方式二：直接嵌入img标签（适合静态状态） #

如果你的仪表盘状态不需要动态修改，直接在<li>里插入图标标签更简单：

<ul class="dashboard-list">
  <li><img src="bulb-on.png" alt="房间已开启" width="24" height="24"> 客厅</li>
  <li><img src="bulb-off.png" alt="房间已关闭" width="24" height="24"> 主卧</li>
  <li><img src="door-open.png" alt="门已打开" width="24" height="24"> 入户门</li>
  <li><img src="door-closed.png" alt="门已关闭" width="24" height="24"> 阳台门</li>
</ul>

关键注意点 #

• 图标路径要正确：如果图标放在icons子文件夹里，路径要写成icons/bulb-on.png，别写错层级。
• 统一图标尺寸：提前把所有图标调整成相同大小（比如24x24px），避免页面布局错乱。
• 加alt文本：给每个图标添加alt属性，方便屏幕阅读器识别，提升页面可访问性。

内容的提问来源于stack exchange，提问作者user19040997