html改变按钮样式

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

最初三个按钮都没选如图一，然后点击“已读”按钮，“已读”按钮样式改变。再点击“全部”按钮，“全部”按钮样式改变，“已读”按钮变回原样式。
按钮的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")}
}

html改变按钮样式相关推荐

vue点击按钮改变按钮样式
一. 效果点击按钮前: 点击按钮后: 再次点击按钮变回原来的样式: 二. 具体代码 <template><div id="box"><button ...
unity Button按钮点击时改变按钮图片样式
两种改变按钮图片的方法按钮原来是点击的时候,希望它变成这里也可以变成其他图片,不光是改变颜色一.点击时改变图片(点击其他物体时会改回去) 添加Button后,改变设置我们要把这个红色的改成 ...
element 按钮样式点击后发生改变（完整改变element按钮样式）
一般网站按钮都是整体风格,所以,我就直接全局设置了按钮样式: 自己设置的话,只用设置 :hover 和 :focus 就可以了 button.common_btn{background-color: ...
JAVA Swing——设置JButton按钮样式
1.对JButton大小的设置因为JButen是属于小器件类型的,所以一般的setSize不能对其惊醒大小的设置,所以一般我们用 button.setPreferredSize(new Dimens ...
jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css ...
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）
前言一按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用.但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的. 本人作为一名计 ...
MFC中改变按钮颜色的方法
本文参考学习 https://blog.csdn.net/zxccaoya/article/details/54142523 而来. 这里介绍mfc 中改变按钮颜色的最简单方法. 使用CMFCButt ...
silverlight 关于按钮样式
概述请想象这样一个场景,小型企业通过自己的站点可以让更多的顾客了解到您的产品.在许多商业领域,公司都会有自己的站点来宣传自己.现在,越来越多的商业客户希望将自己的站点升级到Web 2.0,其中,许 ...
C#自动更新Excel报表而不改变原有样式（2021.8.11）
C#自动更新Excel报表而不改变原有样式 2021.8.11 1.需求分析 1.1 原始数据表(`原始数据.xlsx`) 1.2 Excel报表(`20210811 报表.xlsx`) 1.3 报表 ...

html改变按钮样式

html改变按钮样式相关推荐

最新文章

热门文章