css 在页面完全加载之前，如何用JS设置正文背景色？

mqkwyuun 于 2023-03-14 发布在其他

关注(0)|答案(6)|浏览(135)

我使用这个脚本来允许用户更改背景颜色...

document.onclick = function SetFavColor(e) {
    if (e.target.className == 'AvcGbtn') {
        var favColor = e.target.style.backgroundColor;

        localStorage.setItem('color', favColor);
        document.body.style.backgroundColor = favColor;
        console.log(favColor);
    }
};

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var favColor = document.body.style.backgroundColor;
    var color = localStorage.getItem('color');

    if (color === '') {
        document.body.style.backgroundColor = favColor;
    } else {
      document.body.style.backgroundColor = color;
    }
});

CSS：

body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}

超文本：

<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>      
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span>

这是工作，但问题是，它显示所选的颜色后，页面完全加载。我想显示的颜色，用户选择 * 前 * 页面加载。
示例：背景色为白色，用户选择红色。脚本在选择之前显示白色背景色，用户选择红色之后，脚本将背景色更改为红色。如何执行此操作？
这正是我试图用Javascript做的，例如CSS

body:before {
background-color: red;
}

css

来源：https://stackoverflow.com/questions/53836827/how-to-set-body-background-color-with-js-before-the-page-fully-loads

6条答案

按热度按时间

o75abkj41#

首先，您可以简化设置颜色的逻辑，如下所示：

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var color = localStorage.getItem('color');
    if (color != '') {
        document.body.style.backgroundColor = color;
    }
});

只有在本地存储了某些内容时才需要更改颜色，否则将自动使用CSS中指定的默认颜色。
为了实现快速更改，您可以删除任何事件，并将脚本放在head标签中，而不是以body元素为目标，您可以以html元素为目标，由于background propagation，您将获得相同的结果：

<!DOCTYPE html>
<html>
<head>
  <!-- coloration -->
  <style>html {background:red} /*default color*/</style>
  <script>
    var color ="blue" /*localStorage.getItem('color')*/;
    if (color != '') {
      document.documentElement.style.backgroundColor = color;
    }
  </script>
  <!-- -->
</head>
<body>

</body>
</html>

代码段正在更改代码，您需要在本地进行测试以获得更准确的结果。

赞(0）回复(0）举报 2023-03-14

nzk0hqpo2#

你需要使用一个不同的事件onreadystatechange。这个事件在onload之前触发。我试了一下函数，把'橙子'设置为这个事件的默认值，把另一个设置为click off按钮，因为我禁用了不在代码中的cookie。如果你想要脚本能运行的那么快，那么就把它作为调用（红色）（绿色）作为自执行。
我添加了一个console.log，这样您就可以看到颜色根据事件从红色变为橙子再变为蓝色（发生得很快，请参见日志时间）

(window.getColor=function (c) {
  var favColor = document.body.style.backgroundColor;
  var color = !!c ? c : "#FFFAFF"; //getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
  console.log(color);
})('green');

function setColor(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    //setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  } else {
    getColor("#DAFFFA");
  }
}
document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    //dom is ready, window.onload fires later
    getColor("orange");
  }
};
document.onclick = setColor;

window.onload = function() {
  getColor('blue');
};
getColor('red');

body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}

<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>

<span class="AvcGbtn" style="background: #e8e8e8; background-size: 100% 100%;" rel="nofollow"></span>

赞(0）回复(0）举报 2023-03-14

kmbjn2e33#

不要忽视老式Javascript的强大功能：在正确的地方有效地使用document.write，比如在“head”标签的末尾。

<head>
    <link rel="stylesheet" type="text/css" href="..."/>
    <script type="text/javascript">
    (function(){
      var color = localStorage.getItem('color');
      if(typeof(color) === "string" && color != "") {
         document.write("<style type=\"text\/css\">body{background-color:" + color + ";}</style>");
      }
    }());
    </script>
</head>

赞(0）回复(0）举报 2023-03-14

h4cxqtbf4#

不要把你的背景色改变函数放在window.onload上，试着把它放在<script>标签中，就在<body>标签的后面：

<html>
  ...
  <body>
    <script>
      // This js code will be executed before the rest of the page is loaded
    </script>
    ...
  </body>
</html>

赞(0）回复(0）举报 2023-03-14

fjnneemd5#

由于内联CSS是在javascript处理之前处理的，你有没有试过简单地从内联CSS中删除背景色？

document.onclick = function(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  }
};

window.onload = function() {
  var favColor = document.body.style.backgroundColor;
  var color = getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
};

body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>

赞(0）回复(0）举报 2023-03-14

vtwuwzda6#

有时候，所需要的只是使用setTimeout将页面加载分成两部分。

<!DOCTYPE html>
<html>
<head>
<script>
//Load page part 1
//setTimeout allows the page to be rendered immediately 
window.onload = function Load1(){
  Load2Timeout = setTimeout(Load2,1);
}
//Load page part 2
//This loop is just simulating a long page load
var f = ""
function Load2() {
  for (var i = 1; i < 50000; i++) {
    f += "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>"
  };
  document.body.innerHTML = f
}
</script>
<style>
  body {background-color:Wheat}
</style>
</head>
<body>
  Loading page. Please wait...
</body>
</html>

赞(0）回复(0）举报 2023-03-14

我来回答

css 在页面完全加载之前，如何用JS设置正文背景色？

6条答案

相关问题

热门标签

最新问答