如何在不访问 HTML 的情况下拆分 HTML 页面，例如使用 split.js？

Question

我有一个 static HTML 页面，我无法更改 HTML 部分，所以我相信我只能使用 JavaScript 修改页面。

我想通过水平拆分/装订线将页面分成两部分，可能使用split.js 。

页面只有两个这样的div

<body>
<div class=Foo>
<div align=center>
...
</div>
</div>
</body>

是否可以将拆分放入此页面？

Answer 1

我没有使用过 split.js 但这是你想要的吗？ 您可以优化代码，但可以通过删除元素并对它们设置样式并将它们添加回去来实现拆分。JS代码：

const outerDiv = document.querySelector('body > div');
const innerDiv = document.querySelector('body > div > div');
const outerFirst = outerDiv.firstElementChild;
outerDiv.removeChild(outerFirst);
innerDiv.removeAttribute('align');
outerDiv.removeAttribute('class');
const body = document.querySelector('body');
body.innerHTML = '';
outerDiv.style.width = '50%';
outerDiv.style.float = 'left';
innerDiv.style.width = '50%';
innerDiv.style.float = 'left';
body.appendChild(outerDiv);
body.appendChild(innerDiv);

编辑：水平分割：

const outerDiv = document.querySelector('body > div');
const innerDiv = document.querySelector('body > div > div');
const outerFirst = outerDiv.firstElementChild;
outerDiv.removeChild(outerFirst);
innerDiv.removeAttribute('align');
outerDiv.removeAttribute('class');
const body = document.querySelector('body');
body.innerHTML = '';
body.appendChild(outerDiv);
body.appendChild(innerDiv);
Split([outerDiv, innerDiv], {
    direction: 'vertical',
    sizes: [50, 50]
});

如何在不访问 HTML 的情况下拆分 HTML 页面，例如使用 split.js？

问题描述

1 个解决方案

解决方案1
1 2022-11-17 01:15:52

如何在不访问 HTML 的情况下拆分 HTML 页面，例如使用 split.js？

问题描述

1 个解决方案

解决方案1 1 2022-11-17 01:15:52

解决方案1
1 2022-11-17 01:15:52