javascript - 使用 JavaScript 动态重置 CSS 属性

Question

我正在尝试创建一个具有两种状态的框：

(a) 框的宽度为 70% (b) 框的宽度为 10%

用户应该能够单击该框以在两种状态之间交替，因此如果该框处于状态“a”，则单击时它将转换为状态“b”。如果框处于状态“b”，它会在单击时转换为状态“a”，依此类推。我正在使用下面的 css 来设置盒子的初始状态：

#box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}

我正在使用下面的 javascript 函数来允许该框可点击：

function slideLeft1(){
if(document.getElementById('box1').style.width='70%'){
document.getElementById('box1').style.width='10%';
 }
 else{
 document.getElementById('box1').style.width='70%';
 }
 }

它正在从 70% 到 20%，但不是相反，所以 if 语句有效，但 else 语句无效。有任何想法吗？？

Answer 1

您没有检查条件，而是使用 double == 分配它

function slideLeft1(){
if(document.getElementById('box1').style.width == '10%'){
document.getElementById('box1').style.width='70%';
 }
 else{
 document.getElementById('box1').style.width='10%';
 }
 }