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