如何利用js操作复杂css布局，实现元素的显示隐藏，并自适应宽高

在大多数业务场景中我们使用的都是固定布局，即使是flex布局也是固定好的，顶多是一侧固定宽度，剩余自适应缩放。但是有些场景可能需要对窗口进行拆分，比如，设置一个分屏，将内容区域一分为二。或者，将屏幕动态的拆分为不规则行列布局，比如左侧一列，右侧垂直等分两行等布局。这种场景要利用js去改变元素的css样式了。主要是操作dom，获取dom元素，给dom加style或class。

复杂的css布局，除了获取要改变元素自身的dom节点，还可能操作兄弟节点，或者父级节点。因为自身定位的改变也会影响其他元素。因此，掌握几个js获取dom节点的方法即可。更改样式通常有两种，一是获取dom然后通过style更改样式，这种优先级高，适合快速调整布局，且布局样式多，不用定义过度的class；另一种是自定义几个class样式类，根据不同布局方式，动态给元素加上匹配的class，这种适合布局简单，在两个状态内切换。可根据情况自行选择。

js实现复杂css布局 步骤

在JavaScript中操作复杂的CSS布局通常涉及到DOM操作和样式更改。

1. 事件监听：可以通过事件监听来响应用户的交互，例如点击事件、鼠标移动事件等，从而动态更改元素的样式。

2. 获取元素：首先，你需要获取你想要操作的元素。这可以通过document.getElementById、document.querySelector或document.querySelectorAll等方法来实现。

3. 更改样式：一旦你获取了元素，你可以通过更改其style属性来改变它的样式。可以更改display属性来控制元素的显示隐藏，更改height和width属性来控制元素的宽高。更改backgroundColor、color、fontSize等属性。

4. 添加或移除类：另一种方法是通过添加或移除类来更改元素的样式。这可以通过classList属性来实现，它允许你添加、移除或切换类

 获取元素举例

 const container = document.getElementById("container") as HTMLDivElement;

更改样式举例

比如，一个div内部有两个兄弟节点，这两个div有三种分布情况：宽度100%：0，0：100%，50%：50%。即单独占全部，以及分屏情况。

这里操作的是右侧节点，previousSlibing获取的是前面的兄弟节点。

获取dom元素后，就可以拿到dom的所有属性，包括style样式，通过style可以操作宽高等css样式。

export const getViewDistribution = (type: ViewDistribution) => {
  const viewContainer = document.getElementById("extraView") as HTMLDivElement;
  switch (type) {
    case ViewDistribution.MainView:
      viewContainer.style.width = "0%";
      (viewContainer.previousSibling as HTMLElement).style.width = "100%";
      return;
    case ViewDistribution.ExtraView:
      viewContainer.style.width = "100%";
      (viewContainer.previousSibling as HTMLElement).style.width = "0%";
      return;
    case ViewDistribution.MainViewAndExtraView:
      viewContainer.style.width = "50%";
      (viewContainer.previousSibling as HTMLElement).style.width = "50%";
      return;
  }
};

添加或移除class举例

view.div.classList.toggle("hidden",!visible);
view.visible = visible;

// 重新计算extraViews的高度
const visibleExtraViews = extraViews.filter((view) => view.visible);
const height = 100 / visibleExtraViews.length;
visibleExtraViews.forEach((view) => {
  view.div.style.height = height + "%";
});

这里使用 classList.toggle 方法来切换 hidden 类。如果 visible 是 true，那么 hidden 类将被移除；如果 visible 是 false，那么 hidden 类将被添加。这样，我们就可以通过类来控制元素的显示和隐藏，而不是直接操作 style 属性。

 自适应布局举例

display属性进行隐藏，隐藏的元素不占位，通过这个特性进行隐藏，更改剩余元素布局。

可以通过遍历剩余可见元素，进行布局，以下是等分高度的例子，根据实际情况进行布局的调整

  view.div.style.display = visible ? "block" : "none";
  view.visible = visible;

  // 重新计算views的高度
  const visibleViews = views.filter((view) => view.visible);
  const height = 100 / visibleViews .length;
  visibleViews .forEach((view) => {
    view.div.style.height = height + "%";
  });

相信有了这个介绍，你应该不惧怕自适应布局了，js操作dom布局也很esay