window.getComputedStyle 在 Chrome 中给出了样式的值，但在 Firefox 和 Microsoft Edge 中它给出了一个空字符串，在 Internet Explorer 中，它说它不支持该方法。这是我的代码。
每当单击 Upvote 图像时，它都会触发该upDownVote()函数，并传递两个参数。这是 HTML。
<div id="upvote" title="Click to UpVote" onClick="upDownVote('increment',<?php echo $id; ?>);"></div>
<div id="downvote" title="Click to DownVote" onClick="upDownVote('decrement',<?php echo $id; ?>);"></div>
我通过 ajax 将三个变量传递给我的 php 脚本；ID，类型，适用。类型可以存储一个值，增量或减量。
我想要，甚至点击投票按钮。投票值加 1，按钮背景发生变化。按钮 downvote 也是如此，但这里的投票价值减少了。type我用变量处理这个。
当再次点击upvote（或用户双击）时，投票值必须减少而不是增加。我使用 if 条件内的嵌套 if 条件（当类型为增量时）处理此问题。在那种情况下，我检查了是否applicable大于一。如果是，我将其更改type为递减并适用于 0，以及其原始图像的背景。
但是，如果当用户在单击 downvote 按钮后单击 upvote 按钮时会怎样。在那个条件下applicable值大于 1。然后必须更改type为减量。那不应该发生。为此，在我的嵌套 if 条件中，我还添加了检查 downvote 按钮的背景。页面加载时必须与之前相同。
当适用值大于 1 时（当用户在点击 downvote 之前点击 upvote）。在我的 php 脚本中，我将投票值增加了 2。
否决按钮的逻辑相同。
这是JavaScript。
var applicable = 0; // determine applicable to vote or not.
var upvote = document.getElementById("upvote");
var downvote = document.getElementById("downvote");
var upvoteBlack = window.getComputedStyle(upvote).getPropertyValue("background");
var downvoteBlack = window.getComputedStyle(downvote).getPropertyValue("background");
function upDownVote(x, id) {
debugger;
var type = x; // determine the type(increment or decrement).
if (type === "increment") {
upvote.style.background = "url(img/image-sprite-1.jpg) 0px -40px";
applicable++; // increment in the applicable.
if (applicable > 1 && window.getComputedStyle(downvote).getPropertyValue("background") === downvoteBlack) {
type = "decrement";
applicable = 0;
upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
}
downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
} else {
downvote.style.background = "url(img/image-sprite-1.jpg) -40px -40px";
applicable++;
if(applicable > 1 && window.getComputedStyle(upvote).getPropertyValue("background") === upvoteBlack) {
type = "increment";
applicable = 0;
downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
}
upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
}
// Ajax started here.
}
的 CSSupvote和downvote.
div#upvote {
width: 40px;
height: 40px;
background: url(../img/image-sprite-1.jpg);
background-position: 0px 0px;
margin: 0px auto;
margin-top: 10px;
cursor: pointer;
}
div#downvote {
width: 40px;
height: 40px;
background: url(../img/image-sprite-1.jpg) -40px 0px;
background-position: -40px 0px;
margin: 0px auto;
cursor: pointer;
}
一切正常，但现在我被卡住了。如何获取按钮的背景值，因为window.getComputedStyle所有浏览器都不能正常工作。我想知道是否有任何其他属性可以让我拥有背景属性。
另外，我想知道如何用不同的逻辑做同样的事情。如果我无法为window.getComputedStyle.