Question

我一直在研究这个小项目，我一直试图让背景颜色变化。但由于某种原因它不起作用。我尝试使用的部分是p.style.background ='$color'

HTML（可能有点奇怪，因为它是用哈巴狗写的，这是编译的）

<div id="MainContainer">
<div id="Left">
  <p id="FontSettings">Font settings</p>
  <p id="Font">Ab</p>
  <p id="FontName">
    Roboto <span id="FontWeight">Normal</span></p>
</div>
<div id="Right"><sup id="StandardFontSup">Standard font</sup>
  <select id="FontSelect" onchange="EchoFontName(); changeFont (this);">
    <option value="Roboto">Roboto</option>
    <option value="Lato">Lato</option>
    <option value="Raleway">Raleway</option>
    <option value="Ubuntu">Ubuntu</option>
  </select><sup id="StyleSup">Style</sup>
  <select id="StyleSelect" onchange="EchoStyleName(); changeStyle (this);">
    <option value="Thin">Thin</option>
    <option value="Light">Light</option>
    <option value="Normal" selected="selected">Normal</option>
    <option value="Bold">Bold</option>
  </select>
  <div id="ColorTilesContainer">
    <div id="blue" onclick="blueCheckToggle()"></div>
    <div id="blueCheck" onclick="blueCheckToggle()"></div>
    <div id="orange" onclick="orangeCheckToggle()"></div>
    <div id="orangeCheck" onclick="orangeCheckToggle()"></div>
    <div id="green" onclick="greenCheckToggle()"></div>
    <div id="greenCheck" onclick="greenCheckToggle()"></div>
    <div id="teal" onclick="tealCheckToggle()"></div>
    <div id="tealCheck" onclick="tealCheckToggle()"></div>
    <div id="custom" onclick=""></div>
  </div>
</div>

的Javascript

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontFamily = font.value;
}
function EchoFontName() {
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementById("FontSelect").value;
  f.textContent = FontNameVar;
}
var changeStyle = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontWeight = font.value;
}
function EchoStyleName() {
  var f = document.getElementById("FontWeight");
  var FontNameVar = document.getElementById("StyleSelect").value;
  f.textContent = FontNameVar;
}
var x = document.getElementById("blueCheck");
var t = document.getElementById("orangeCheck");
var r = document.getElementById("greenCheck");
var l = document.getElementById("tealCheck");
var p = document.getElementById("Left");

function blueCheckToggle() {
  if (x.style.opacity === "0") {
  x.style.opacity = "1";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$lightblue";
  }
  else {
    x.style.opacity = "0";
  }
}
function orangeCheckToggle() {
  if (t.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "1";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$orange";
  }
  else {
    t.style.opacity = "0";
  }
}
function greenCheckToggle() {
  if (r.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "1";
  l.style.opacity = "0";
  p.style.background = "$green";
  }
  else {
    r.style.opacity = "0";
  }
}
function tealCheckToggle() {
  if (l.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "1";
  p.style.background = "$teal";
  }
  else {
    p.style.opacity = "0";
  }
}

您还可以访问我的codepen，查看完整的项目，然后分叉。 https://codepen.io/JorisMertz/pen/dKRNBv?editors=0010

提前致谢！里斯。

Answer 1

如果要更改css属性'background-color'，则需要使用JS DOM CSS W3School HTML DOM Style Object：

p.style.backgroundColor = "lightblue";

Answer 2

我使用的是Sass变量，因为它添加了内联样式，所以它不会提取变量。谢谢你的帮助。

Javascript，背景颜色变化不起作用

2 个答案: