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

【问题标题】：Changing Background and Foreground with linked css in html在 html 中使用链接的 css 更改背景和前景
【发布时间】：2016-02-04 01:48:40
【问题描述】：

我到处都看过。目标是使用样式表中的类来设置颜色和背景例如，类选择器 colorA 会将文本颜色设置为颜色“A” 通过更改具有 id foreground 的 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;
}

【问题讨论】：

使用 .className 改变类

标签： javascript html css

【解决方案1】：

试试这个

确保你传递了正确的类名

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

【讨论】：

对不起，我听不懂？ “col”是我从 document.getElementsByClassName("backgroundB") 获得的类名
你试图通过函数将类名分配给“backgroundColor”
Insread 使用 className 属性设置元素的类名。如果你想使用 backgroundColor 你需要传递颜色代码而不是类名
感谢您的帮助，我正在尝试，但仍然没有成功

【解决方案2】：

changeBG 的第一个参数错误。

在 w3c 中的 getElementsByClassName 方法定义
getElementsByClassName() 方法返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象

在html代码中，点击事件绑定
onClick= changeBG(document.getElementsByClassName("backgroundB"))

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

col 对象是具有包含'backgroundB' 的类属性的元素的集合。 backgroundColor 是一个元素属性，用颜色值设置。例如）#f3f3f3

你可以这样修复它。

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

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

【讨论】：

我非常感谢你，你是最棒的，我整个星期都在努力解决这个问题，终于搞定了！

【解决方案3】：

使用 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>

【讨论】：

我是 html 和 javascript 的新手，我们还没有使用 jquery。这看起来会起作用我只是不知道如何将它翻译成html
创建一个新页面，然后复制我的答案并将其粘贴到创建的页面中，然后您将弄清楚如何更改任何类中任何元素的背景颜色