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 是否大于 1。如果是，我将 type 更改为递减并适用于 0，也将背景更改为其原始图像。

但是，如果用户在单击反对票按钮后单击赞成票按钮会怎样。在那种情况下，applicable 值大于 1。然后必须将 type 更改为递减。那不应该发生。为此，在我的嵌套 if 条件中，我还添加了检查否决按钮的背景。页面加载时必须与之前相同。

当适用值大于 1 时(当用户在单击反对票之前单击赞成票时)。在我的 php 脚本中，我将投票值增加了两倍。

反对票按钮的逻辑相同。

这是 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.
}

upvote 和 downvote 的 CSS。

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 的解决方案。

最佳答案

速记属性问题

background 是一个速记属性，是背景相关属性的组合。当您将背景设置为 pink 时，实际上是在设置多个背景属性，backgroundColor 就是其中之一。例如，它实际上可能相当于 rgb(255, 165, 0) none repeat scroll 0% 0%/auto padding-box border-box。

getComputedStyle 不会返回速记属性的值，除非您已经发现在 Chrome 中。

要获得计算样式，请查找原始属性(如 backgroundColor)的值，而不是简写属性(如 background)的值。

不同的方法？

但是，这并不是您真正想要的做事方式。与直接在元素上设置样式不同，如果您在元素中添加和删除类，然后为这些类定义规则，您会发现您的代码更加简洁。正如您所发现的，直接在元素上设置样式可能需要您返回并查询样式，而对于类，您可以使用 elt.classList.has() 轻松查询现有类，或使用 .toggle() 切换，或添加或删除。

更多关于 getComputedStyle

getComputedStyle 是一个相当专业的 API，只有在特殊情况下才需要。

有关 getComputedStyle 和速记属性的更多信息，请参阅 this question .已报告针对 FF 的错误，您可以找到它 here .

查看此 MDN page .它说 CSSStyleDeclaration(这是 getComputedStyle 返回的)有一个 getPropertyCSSValue 方法

returns ... null for Shorthand properties.

关于javascript - window.getComputedStyle 不适用于除 Chrome 之外的其他浏览器中的速记属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32295296/