html改变按钮样式

今天有人问我怎么改样式，需求是三个按钮，一次点一个，要求被点击的按钮和没被点的按钮是两种不同的样式，如图所示。

最初三个按钮都没选如图一，然后点击“已读”按钮，“已读”按钮样式改变。再点击“全部”按钮，“全部”按钮样式改变，“已读”按钮变回原样式。
按钮的html代码如下

<div
      style="justify-content: space-between;width: 20%"
      class="flex-row">
      <button
        id="all"
        class=".white.shadowed shadowed big item"
        @click="refresh(0,'all')">
        全部
      </button>
      <button
        id="unRead"
        class=".white.shadowed shadowed big item"
        @click="refresh(0,'unRead')">
        未读
      </button>
      <button
        id="read"
        class=".white.shadowed shadowed big item"
        @click="refresh(0,'read')">
        已读
      </button>
    </div>

这里先说第一种方法

document.getElementById('all').style.fontSize='35px'  //修改字体大小

但是现在要求的样式已经有了，需要直接换class内的名称，将.white.shadowed改为theme-primary，不能单独修改某个属性。经过查询后用来这个方法。

document.getElementById("unRead").setAttribute("class","theme-primary big item")

具体js代码如下，因为点击按钮还有其他需求，所以有参数page用了async，光实现这个功能可以去掉，并在html中去掉page参数。

let refresh = async function (page,isRead) {
    if (isRead == null){
      isRead = "unRead";
    }
    if(isRead==="unRead"){
      document.getElementById("unRead").setAttribute("class","theme-primary big item")
      document.getElementById("all").setAttribute("class",".white.shadowed shadowed big item")
      document.getElementById("read").setAttribute("class",".white.shadowed shadowed big item")
    }
    else if(isRead==="all"){
      document.getElementById("all").setAttribute("class","theme-primary big item")
      document.getElementById("unRead").setAttribute("class",".white.shadowed shadowed big item")
      document.getElementById("read").setAttribute("class",".white.shadowed shadowed big item")
    }
    else{
      document.getElementById("read").setAttribute("class","theme-primary big item")
      document.getElementById("unRead").setAttribute("class",".white.shadowed shadowed big item")
      document.getElementById("all").setAttribute("class",".white.shadowed shadowed big item")
    }
}