已实现站点全屏切换功能，如何为绑定按钮添加cursor:pointer悬停样式

针对当前已经跑通的全屏切换功能，给绑定点击事件的图片按钮配置cursor: pointer样式完全不需要改动现有退出全屏的核心逻辑，有三种直接可用的实现方式：

• 最推荐用CSS类绑定实现：给绑定了全屏切换事件的图片按钮加一个专属类，比如fullscreen-toggle-btn，在项目样式文件中写对应的规则：

  .fullscreen-toggle-btn {
    cursor: pointer;
  }
  

  这种方式把样式和交互逻辑完全拆开，不用动原有JS代码，后续要给按钮加 hover 变色、阴影这类效果，直接在这个类规则里追加就行，维护最方便。
• 临时调试想快速出效果就用行内样式：直接在对应按钮的HTML标签上加个行内样式属性，不用改样式文件也不用改JS，保存刷新就生效：

  <img src="你的按钮图片地址" style="cursor: pointer;" alt="全屏切换">
  

• 要是习惯在JS初始化流程里配按钮属性，就在绑定事件的逻辑段里单独给元素加样式就行，和全屏退出的判断分支完全独立，不会打乱原有功能：

  // 先拿到按钮对应的DOM节点
  const toggleBtn = document.querySelector('.你现有按钮的选择器')
  // 直接设置光标样式
  toggleBtn.style.cursor = 'pointer'
  // 下面是你原有的功能绑定逻辑，完全不用改
  toggleBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      // 原有进入全屏的逻辑
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  })
  

提醒：别把cursor: pointer设成所有图片的全局默认样式，不然页面上那些不能点的图片悬停也会变手型，反而会误导用户。

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