Question

我到处都看了。目标是使用样式表中的类来设置颜色和背景例如，类选择器colorA会将文本颜色设置为颜色“A” 通过更改具有id前景的div的类来更改文本的颜色通过更改id为背景的div类来更改背景颜色。

我能够通过手动输入颜色来更改它，但是当我尝试通过获取className来更改它时，它会失败。这是我的代码我尝试了几个不同的东西没有运气，请帮助：

JavaScript的：

function changeBG(col) {
  var x = document.getElementsByTagName("DIV")[0];
  x.backgroundColor = (col);
}

HTML：

<body>

<div class="holder">
<div id="background" class="backgroundC">
    <div id="foreground" class="colorE">
        <p>
            Lorem ipsum </p>

</div>
</div>
</div>

 <div class="holder">
<table>
 Foreground <INPUT type="button" value="A" class = "colorA" name="button3"        onClick= "document.fgColor= 'colorA'">
     <INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'">

    Background <INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'">
     <INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))>
</table>
</div>

CSS样式表：

.colorA {
  color: #4581cf;
}

.colorB {
  color:  #B7E2FF;
}

.backgroundA {
  background-color: #4581cf;
}

.backgroundB {
  background-color:  #B7E2FF;
}

Answer 1

试试这个

确保您传递的是正确的班级

function changeBG(col) {
      var x = document.getElementsByTagName("DIV")[0];
      x.className=col;
     }

Answer 2

使用JQuery。创建一个新表单，然后复制此代码并粘贴它，您将注意到特定类颜色的特定div可以轻松更改。

<html>
 <head>
  <title>The Selecter Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    $(".big, #div3").css("background-color", "yellow");
   });
 </script>
</head>


 <body>
  <div class="big" id="div1">
      <p>This is first division of the DOM.</p>
  </div>
  <div class="medium" id="div2">
      <p>This is second division of the DOM.</p>
  </div>
  <div class="small" id="div3">
      <p>This is third division of the DOM</p>
  </div>
 </body>
</html>

Answer 3

changeBG的第一个参数是错误的。

w3c getElementsByClassName方法定义中的

getElementsByClassName（）方法返回文档中具有指定类名的所有元素的集合，作为NodeList对象

在HTML代码中

，点击事件绑定
onClick= changeBG(document.getElementsByClassName("backgroundB"))

在js中，点击事件处理程序
x.backgroundColor=col;

col对象是一个元素集合，其class属性包含'backgroundB'。 backgroundColor是一个元素属性，使用颜色值设置。 ex）＃f3f3f3

您可以像这样修复它。

x.className = "background" + col[0].value; //col[0] is the input element classfied 'backgroudB'. col[0].value equals 'B'

className属性设置或返回元素的类名。

在html中使用链接的css更改背景和前景

3 个答案: