用户设置背景颜色和字体提示

User sets Background Color and Font From prompt

本文关键字：字体 提示 颜色 设置 背景 用户      更新时间：2023-09-26

我正试图想出一个网站，我可以让用户设置背景色和字体。我可以先设置颜色，但是当我尝试设置字体时，它只会保存我的"样式"颜色，所以我只剩下字体更改。如果你们知道如何解决这个问题，请告诉我。我已经尝试了不同的方法来解决这个问题，但显然我仍然没有想出一个解决方案。非常感谢您的时间和考虑。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
   function start() 
   {
    var inputColor = prompt ("Enter a color name for the " + "background of this page:");
    document.body.setAttribute("style", "background-color:" +inputColor); 
    var inputText = prompt("Enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
    while (inputText > 2) 
    {
        var inputText = prompt("You Entered an Invalid Number!!!'n Please enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");    
    }
    if (inputText == 1) 
        document.body.setAttribute("style", "font-family: serif");
    if (inputText == 2)
        document.body.setAttribute("style", "font-family: sans-serif");
    }
    window.addEventListener("load", start, false);
 </script>
 </head>
 <body> 
 <h1>Welcome To Our Customization Site</h1>
 <p>As you can see, by selecting a background color and specified text you can alter the way this site looks!</p>
<p>Just one of the many reasons our site is the best!!</p>
</body>
</html>

这是因为您正在覆盖style属性。尝试使用style属性来操作样式，而不是setAttribute。

document.body.style.backgroundColor = inputColor
document.body.style.fontFamily = "serif";

通过使用setAttribute，您可以将属性的值设置为作为第二个参数提供的值，这意味着它将擦除该属性用于保存的先前数据。

通过使用style属性，JavaScript将确保只有你改变的CSS属性会在元素上改变，并分别改变它的样式。

在你的函数中:

function start() {
  var inputColor = prompt("Enter a color name for the " + "background of this page:");
  document.body.setAttribute("style", "background-color:" + inputColor);
  var inputText = prompt("Enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
  while (inputText > 2) {
    var inputText = prompt("You Entered an Invalid Number!!!'n Please enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
  }
  if (inputText == 1)
    document.body.setAttribute("style", "font-family: serif");
  if (inputText == 2)
    document.body.setAttribute("style", "font-family: sans-serif");
}

您使用setAttribute("style", "font-family: serif")(以及其他用途)，它将给定DOM节点的style 属性设置为作为第二个属性提供的字符串(在本例中为"font-family: serif");每次使用setAttribute()时，您将覆盖之前提供的任何样式。

要解决这个问题，你可以使用:

document.body.style.fontFamily = "serif";


function start() {
  var inputColor = prompt("Enter a color name for the " + "background of this page:");
  document.body.style.backgroundColor = inputColor;
  var inputText = prompt("Enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
  while (inputText > 2) {
    inputText = prompt("You Entered an Invalid Number!!!'n Please enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
  }
  if (inputText == 1) {
    document.body.style.fontFamily = 'serif';
  }
  if (inputText == 2) {
    document.body.style.fontFamily = 'sans-serif';
  }
}
window.addEventListener("load", start, false);
<h1>Welcome To Our Customization Site</h1>
<p>As you can see, by selecting a background color and specified text you can alter the way this site looks!</p>
<p>Just one of the many reasons our site is the best!!</p>

JS Fiddle demo.

设置一个单独的属性("font-family"的属性)，或者:

var currentStyles = document.getAttribute('style');
document.body.setAttribute('style', currentStyles + ' ' + 'font-family: serif');


function start() {
  var inputColor = prompt("Enter a color name for the " + "background of this page:");
  document.body.style.backgroundColor = inputColor;
  var inputText = prompt("Enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font"),
    currentStyles = document.body.getAttribute('style');
  while (inputText > 2) {
    inputText = prompt("You Entered an Invalid Number!!!'n Please enter a number to select one of the two styles:'n(1)For Serif Font'nOr'n(2) For Sans Serif Font");
  }
  if (inputText == 1) {
    document.body.setAttribute('style', currentStyles + ' font-family: serif;');
  }
  if (inputText == 2) {
    document.body.setAttribute('style', currentStyles + ' font-family: sans-serif;');
  }
}
window.addEventListener("load", start, false);
<h1>Welcome To Our Customization Site</h1>
<p>As you can see, by selecting a background color and specified text you can alter the way this site looks!</p>
<p>Just one of the many reasons our site is the best!!</p>

JS Fiddle demo.

从而从样式属性(getAttribute('style'))中获得先前设置的值，并使用您想要设置的新属性。

引用:

  • Element.getAttribute() .
  • Element.setAttribute() .
  • HTMLElement.style .
相关文章：