Javascript 减少活动屏幕上不同样式的字体大小

假设我有两种或两种以上的按钮样式：

button style1{
    font-size: 20px;
}
button style2{
    font-size: 24px;
}

我想设置按钮标签的样式，这样当按钮（具有不同样式）处于活动状态时，字体大小将减小4倍

button:active{
    font-size: "-=4px"
}

---

最简单的方法是什么？我可以用纯css吗？

您可以这样做，因此按钮的初始字体大小为24px，但激活时为20px

button.size-changing{
字体大小：24px；
}
按钮。大小更改：活动{
字体大小：20px；
}

---

按我

这不是最好的解决方案，但很有效。我制作了一个JS代码示例，看看它是否适合您。我希望我能帮上忙

函数自动样式（）{
//样式名称和字体大小
var arr=[
[“样式1”，20]，
[“样式2”，24]，
[“样式3”，28]，
[“样式4”，32]，
]
//活动样式-4px
var-num=4；
////////////////
var textstl=''；
对于（变量i=0；i
文本样式1
文本样式2
文本样式3
文本样式4
对于代码段中所示的calc和var，这是完全可能的。只需为单个类中的公共css变量分配一个不同的局部值，并在按钮选择器中计算该局部范围但常用的变量的更改

然而，我认为这属于互动的“应该”范畴。我个人不喜欢按钮的文本大小在悬停、聚焦或活动状态下发生变化，如代码片段所示，您必须做出一些让步，以防止按钮下方的项目发生布局变化


button.style1{
--字体大小：16px
}
按钮样式2{
--字体大小：20px
}
按钮样式3{
--字体大小：24px
}
按钮。样式4{
--字体大小：36px
}
按钮样式5{
--字体大小：50px
}
钮扣{
显示：块；
保证金：0；
边缘底部：5px；
框大小：边框框；
高度：计算值（变量（--fontSize）*3）；
宽度：计算值（var（--fontSize）*10）；
字体大小：var（--fontSize）
}
按钮：激活{
字体大小：计算（变量（--fontSize）-4px）
}
我是按钮风格1！
我是纽扣风格2！
我是纽扣风格3！
我是纽扣风格4！
我是纽扣风格的5要在css中进行小计算，请使用calc（）函数

引用css变量时，请使用另一对（）。
存储css变量。执行以下操作


在css的根目录中添加变量名
确保名称以开头--
引用变量时，以var（变量名称）开头

-CSS变量
-CSS计算函数
：根目录{
--按钮尺寸：20px；
}
按钮1.style1{
字体大小：var（--按钮大小）；
}
按钮样式2{
字体大小：var（--按钮大小）；
}
按钮样式3{
字体大小：var（--按钮大小）；
}
按钮：焦点{
字体大小：计算（（变量（--按钮大小））-4px）；
}


页面标题
按钮1
按钮2
按钮3
这在纯css中是不可能的。谢谢，但这不是我想要的，我不希望所有按钮都具有相同的字体大小，但我确实希望其字体大小在激活时动态减小4。所以，第一个按钮的字体大小：24px变为20，第二个按钮的字体大小：20变为16px，你想让我更改代码，这样按钮就会有你想要的类吗？如果是这样，请告诉我类名，我将编辑我的答案@AbdallahBarghouti@smuteanu我有很多按钮，所以这种方法不会有效，只需编辑代码即可。希望这对您现在起作用！：D