window.getComputedStyle不适用于除Chrome之外的其他浏览器的速记属性

Question

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，类型，适用 。 类型可以存储一个值，可以递增或递减。

我想要，甚至点击了upvote按钮。 投票值增加1，按钮背景改变。 按钮减投票相同，但是这是投票价值的下降。 我用type变量来处理。

当再次单击upvote（或由用户双击）时，投票值必须减少而不是增加。 我在if条件中（类型为增量时）使用嵌套的if条件处理了此问题。 在那种情况下，我检查是否applicable （大于1）。 如果是这样，我将type更改为减量并适用于0，也将背景更改为其原始图像。

但是，如果用户在单击向下投票按钮之后又单击向上投票按钮，该怎么办。 在这种情况下， applicable值大于1。然后必须将type更改为减量。 那不应该发生。 为此，在我添加的嵌套条件中，还要检查下降投票按钮的背景。 页面加载时必须与之前相同。

当适用的值大于1时（当用户单击向下投票之前单击向上投票时）。 在我的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.
}

CSS的upvote和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不能在所有浏览器上正常工作。 我想知道是否还有其他属性可以让我拥有background属性。

另外，我想知道如何用不同的逻辑来做同样的事情。 如果我没有window.getComputedStyle的解决方案。

Answer 1

速记财产问题

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

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

有关getComputedStyle和简写属性的更多信息，请参见此问题 。 已报告FF错误，您可以在这里找到。

请参阅此MDN页面 。 它说CSSStyleDeclaration （由getComputedStyle返回）是有一个getPropertyCSSValue方法，该方法可以

对于速记属性返回... null 。