执行JavaScript函数后SharePoint自动刷新，样式修改未保存求助

嘿，这问题我之前在SharePoint里踩过一模一样的坑！核心原因是你用的<button>在SharePoint的页面环境下会触发默认的表单提交行为，导致页面直接刷新，你刚修改的背景色自然就被重置回初始状态了，不管IE还是Chrome都会遇到这个情况。

先看你当前代码的问题：changeCo函数的颜色切换逻辑是没问题的，但按钮本身没有阻止默认的提交动作，SharePoint页面里的表单会把这个按钮当成提交按钮来处理，一点击就触发刷新了。

给你几个可行的解决方案：

方案1：给按钮添加type="button"属性 #

这是最简单直接的方法，因为HTML里<button>的默认类型是submit，加上type="button"后，它就只会执行你的点击事件，不会触发表单提交：

<button type="button" onclick="changeCo()">Change Color</button>

方案2：阻止点击事件的默认行为 #

你可以在点击事件里明确阻止默认动作，两种实现方式：

方式A：在函数里调用event.preventDefault() #

修改你的JavaScript函数和按钮代码：

function changeCo(event){
  // 先阻止默认的提交行为
  event.preventDefault();
  
  var elem = document.getElementById("contentBox");
  var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("background-color");
  if (theCSSprop == 'rgb(0, 0, 0)') {
    document.getElementById('contentBox').style.backgroundColor = 'white';
  }else{
    document.getElementById('contentBox').style.backgroundColor = 'black';
  }
}

按钮部分：

<button onclick="changeCo(event)">Change Color</button>

方式B：在onclick里直接返回false #

这种方式更简洁，不需要修改函数逻辑：

<button onclick="changeCo(); return false;">Change Color</button>

进阶：让颜色修改持久化（刷新页面也保留） #

如果希望用户设置的颜色在页面刷新后也能保留，可以用localStorage存储状态：

<button type="button" onclick="changeCo()">Change Color</button>
<style>
#contentBox { background-Color:black; }
</style>
<script>
function changeCo(){
  var elem = document.getElementById("contentBox");
  var currentColor = window.getComputedStyle(elem,null).getPropertyValue("background-color");
  
  var newColor = currentColor === 'rgb(0, 0, 0)' ? 'white' : 'black';
  elem.style.backgroundColor = newColor;
  // 把颜色保存到本地存储
  localStorage.setItem('contentBoxBg', newColor);
}

// 页面加载时恢复保存的颜色
window.addEventListener('load', function(){
  var savedColor = localStorage.getItem('contentBoxBg');
  if(savedColor){
    document.getElementById('contentBox').style.backgroundColor = savedColor;
  }
});
</script>

这样用户下次打开页面，之前设置的颜色会自动恢复。

内容的提问来源于stack exchange，提问作者AndyWa