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

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

<divstyle="justify-content: space-between;width: 20%"class="flex-row"><buttonid="all"class=".white.shadowed shadowed big item"@click="refresh(0,'all')">全部</button><buttonid="unRead"class=".white.shadowed shadowed big item"@click="refresh(0,'unRead')">未读</button><buttonid="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")}
}