用JS实现一个页面多个css样式实现

使用JS实现一个页面多个css样式的实现，可以通过DOM对象的style属性来操作指定元素的样式。

具体实现步骤如下：

1. 获取需要操作的元素

通过JS的getElementById、getElementsByClassName等方法获取需要操作的元素，例如：

var box = document.getElementById('box');

2. 给元素设置样式

通过DOM对象的style属性，动态给元素设置样式，例如：

box.style.width = '100px';
box.style.height = '100px';

3. 切换样式

通过JS的事件监听机制，监听事件，当事件触发时切换样式，例如：

var button = document.getElementById('button');
button.onclick = function() {
  if (box.style.backgroundColor === 'red') {
    box.style.backgroundColor = 'blue';
  } else {
    box.style.backgroundColor = 'red';
  }
}

在这个示例中，先通过getElementById获取按钮元素，然后给按钮元素添加click事件监听器，当按钮被点击时，会切换box元素的背景颜色。

还可以结合CSS样式表文件来实现多种样式的切换，例如：

var style1 = document.createElement('link');
style1.rel = 'stylesheet';
style1.type = 'text/css';
style1.href = 'style1.css';
document.head.appendChild(style1);

var style2 = document.createElement('link');
style2.rel = 'stylesheet';
style2.type = 'text/css';
style2.href = 'style2.css';
document.head.appendChild(style2);

var button1 = document.getElementById('button1');
button1.onclick = function() {
  style2.disabled = true;
  style1.disabled = false;
}

var button2 = document.getElementById('button2');
button2.onclick = function() {
  style1.disabled = true;
  style2.disabled = false;
}

这个示例中，先通过createElement方法创建link元素节点，分别给style1和style2赋予不同的样式表路径，然后通过appendChild方法将link节点添加到head元素中，实现加载不同的样式表。

通过getElementById获取两个按钮元素，给按钮添加click事件监听器，当按钮被点击时，通过disabled属性来切换样式表的加载。当一个样式表被禁用时，另一个样式表就会生效。

注意：在样式表没有加载完毕之前，操作元素的样式可能不生效。为了避免这种情况，可以通过addEventListener事件监听器，等待页面加载完成后再操作元素样式。