Javascript 如何扩展a<；部门>；水平至100%宽度？

我想能够扩大一个div点击，以使div占据100%的宽度。现在，有两个视频并排播放，当单击其中一个时，我希望它扩展到全宽，并最小化其他视频。这是我的代码，我无法理解为什么这个简单的javascript不起作用：

函数expandRight（）{
document.getElementsByClassName（'.left'）.setAttribute（“样式”，“宽度：100%”）；
document.getElementsByClassName（'.left'）.style.width='100%；
}

。全宽{
宽度：100%；
}
.flex{
显示：-webkit flex；
显示器：flex；
}
.导航{
位置：绝对位置；
-webkit柔性方向：列；
弯曲方向：立柱；
高度：计算（100vh-100px）；
}
.标题菜单{
高度：100px；
背景色：rgba（0,0255,0.5）；
}
.导航视频{
-webkit柔性方向：行；
弯曲方向：行；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit内容：中心；
证明内容：中心；
身高：100%；
光标：指针；
}
.左，.右{
宽度：50%；
身高：100%；
过渡：0.6s缓进缓出；
}
.nav\uuuu视频--左，.nav\uuuuu视频--右{
宽度：100%；
身高：100%；
溢出：隐藏；
}
录像带{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

---

只要确保您有正确的HTML结构和CSS类即可

var div1=document.getElementById（“左”）；
var div2=document.getElementById（“右”）；
var reset=document.getElementById（“reset”）；
div1.addEventListener（“单击”，函数（e）{
增长收缩（本，第2部分）；
});
div2.addEventListener（“单击”，函数（e）{
增长收缩（本，第1部分）；
});
reset.addEventListener（“单击”，函数（e）{
growShrink（null、null、true）；
});
函数（g、s、r）{
if（r）{
第1部分：设置属性（“类”、“内容”）；
第2部分：设置属性（“类”、“内容”）；
返回；
}
g、 setAttribute（“类”、“扩展”）；
s、 setAttribute（“类”、“收缩”）；
}

#包装器{填充：0；}
div{边框：1px黑色虚线；}
.content{
宽度：49.5%；浮动：左侧；边距：0；
}
}
.扩展{宽度：100%；}
.Shrink{display:none；}

L E F T
R I G H T
重置

简短回答：

javascript中有几个问题需要解决：

function expandRight() {
    document.getElementsByClassName('.left').setAttribute("style","width:100%");
    document.getElementsByClassName('.left').style.width='100%';
}

1）正如您可能意识到的，您不需要这两种陈述，因为它们都做相同的事情，这就需要我们

function expandRight() {
    document.getElementsByClassName('.left').style.width='100%';
}

function expandRight() {
    document.getElementsByClassName('left').style.width='100%';
}

2）但所讨论的类名不是

.left

，而是

left

，它将我们带到

function expandRight() {
    document.getElementsByClassName('.left').style.width='100%';
}

function expandRight() {
    document.getElementsByClassName('left').style.width='100%';
}

3）当您使用

getElementsByClassName

或

getElementsByTagName

时，您正在收集整个节点列表。因此，如果您只需要该节点列表中的一项，则必须显式地声明该节点列表项的索引

在这种情况下，只有一个元素的类名为

left

，因此该元素是节点列表中的第一项，即

document.getElementsByClassName（'left'）[0]

你会看到这一点（除了你需要解决的所有其他问题）

现在起作用了

---

回答稍微长一点

如果将上述步骤考虑在内，然后确保当函数将一个div的宽度增加到100%时，同时将另一个div的宽度减少到0，那么最终将得到如下结果：

var leftBox=document.getElementsByClassName（'left'）[0]；
var rightBox=document.getElementsByClassName（'right'）[0]；
函数expandLeft（）{
rightBox.style.width='100%'；
leftBox.style.width='0'；
}
函数expandRight（）{
leftBox.style.width='100%'；
rightBox.style.width='0'；
}

。全宽{
宽度：100%；
}
.flex{
显示：-webkit flex；
显示器：flex；
}
.导航{
位置：绝对位置；
-webkit柔性方向：列；
弯曲方向：立柱；
高度：计算（100vh-100px）；
}
.标题菜单{
高度：100px；
背景色：rgba（0,0255,0.5）；
}
.导航视频{
-webkit柔性方向：行；
弯曲方向：行；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit内容：中心；
证明内容：中心；
身高：100%；
光标：指针；
}
.左，.右{
宽度：50%；
身高：100%；
边框：1px实心rgb（0,0,0）；
过渡：0.6s缓进缓出；
}
.nav\uuuu视频--左，.nav\uuuuu视频--右{
宽度：100%；
身高：100%；
溢出：隐藏；
}
录像带{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}