这可能是一个愚蠢的问题,但我在互联网上搜索过,甚至在 Stack Overflow 上搜索过,但我无法理解这个问题。代码非常基础:
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>DOCUMENT OBJECT MODEL</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<ul>
<li class="sameClass" style="background-color:black; color:white; margin:5px; ">ONE</li>
<li class="sameClass" style="background-color:black; color:white; margin:5px ">TWO</li>
<li class="sameClass" style="background-color:orange; color:red; margin:5px">THREE</li>
<li class="sameClass" style="background-color:orange; color:red; margin:5px">FOUR & FIVE</li>
</ul>
<div id="getValues"></div>
<script src="javascript.js"></script>
</body>
</html>
CSS:
li.differentClass{
background-color:orange;
}
JS:
var element = document.querySelector("li.sameClass");
element.className = "differentClass";
现在,脚本更改了第一个列表项的类名,这是可以理解的。并且在样式表中,类名为“differentClass”的列表项的外观将发生变化。例如,在 CSS 中,我这样写:
li.differentClass{
border:solid 5px pink;
}
这没有任何问题。但是,看看我的原始代码。类名为“differentClass”的列表项应将其背景色更改为橙色。但这是行不通的。不仅如此,像“颜色”这样的属性也没有改变。
问题是什么?
最佳答案
关于javascript - 已更改类的背景颜色属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33130516/