Question

我正在尝试提供一个网站，我可以让用户设置背景颜色和字体。我可以先设置颜色，但是当我尝试设置字体时，它只是保存了我的＆＃34;样式＆＃34;颜色所以我只剩下字体更改。如果你们知道如何解决这个问题，请告诉我。我尝试了不同的方法来解决这个问题，但显然我还没有找到解决方案。非常感谢你的时间和考虑。

<!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>

Answer 1

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

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

通过使用setAttribute，您将设置此属性的值设置为您提供的值作为第二个参数，这意味着它将消除该属性的先前数据曾经持有。

通过使用style属性，JavaScript将确保只更改您更改的CSS属性及其样式。

Answer 2

在你的功能中：

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 属性设置为作为第二个属性提供的字符串（在本例中为{ {1}}）;每次使用"font-family: serif"时，都会覆盖以前提供的任何样式。

要解决此问题，您可以使用：

setAttribute()

＆＃13;

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

＆＃13;

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);

＆＃13;

JS Fiddle demo

设置单个属性（<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>的属性）或：

"font-family"

＆＃13;

var currentStyles = document.getAttribute('style');

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

＆＃13;

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);

＆＃13;

JS Fiddle demo

从而使用您要设置的新属性从样式属性（<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>）获取先前设置的值。

参考文献：

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

2 个答案: