如何重置使用JavaScript更改的CSS属性？ [英] How to reset a CSS attribute that's been changed using JavaScript?

问题描述

我的导航按钮的宽度从100px增加到150px，当盘旋时：

I have navigation buttons that increase in width from 100px, to 150px when hovered over :

nav li:hover{
width:150px;
}

但是使用javascript我已经选择了哪个选项，将继续宽度为150px。当选择每个选项时，它会使其他选项按照我的预期返回到100px：

But using javascript I have made it so that which ever option has been selected, will continue to have a width of 150px. When each option is selected, it makes the other options go back to 100px as I intended :

function show1(){
document.getElementById("nav1").style.width="150px";
document.getElementById("nav2").style.width="100px";
document.getElementById("nav3").style.width="100px";
}
function show2(){
document.getElementById("nav2").style.width="150px";
document.getElementById("nav1").style.width="100px";
document.getElementById("nav3").style.width="100px";
}
function show3(){
document.getElementById("nav3").style.width="150px";
document.getElementById("nav1").style.width="100px";
document.getElementById("nav2").style.width="100px";
}

问题是，一旦选择了其中一个导航选项，它们就没有了当盘旋时，宽度增加到150px，因为功能已将它们设置为100px。

The problem is, once one of the navigation options has been selected, they no longer increase in width to 150px when hovered over, because the functions have set them to stay at 100px.

我正在尝试如何制作它以便每个当悬停在导航按钮上时，导航按钮的宽度总是增加，而选择的任何一个都保持增加的长度。所以我试图找到一种方法将宽度值重置为每个函数执行后我的CSS定义的方式。

I am trying to work out how to make it so that each of the navigation buttons always increases in width when hovered over, while whichever one has been selected stays at the increased length. So i'm trying to find a way to reset the width value to how it is defined by my CSS after each function is executed.

任何人都知道如何解决这个问题？我在javacript相当初级。

Anyone know how to solve this? I'm fairly beginner level at javacript.

推荐答案

我会这样做，将selected样式放在一个单独的CSS类中，并动态地将该类添加到对象中你想拥有固定的宽度，然后动态删除它。

I would do this by putting the "selected" style in a separate CSS class, and dynamically adding that class to the objects you want to have the fixed width, then dynamically removing it.

摆弄JS中的CSS类并不是很困难; 请参阅此处。

Fiddling with CSS classes in JS is not very difficult; see here for example.

这篇关于如何重置使用JavaScript更改的CSS属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！