window.getComputedStyle 不适用于除 Chrome 以外的其他浏览器中的 shorthand 属性

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

我想要，连点赞按钮都点了。投票值增加 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.
}

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 在所有浏览器中都无法正常工作。我想知道有没有其他的属性可以让我拥有背景属性。

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

Answer 1

shorthand属性问题

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

getComputedStyle 不会 return shorthand 属性的值，除了您发现的 Chrome 之外。

要获取计算样式，请查找 backgroundColor 等原始属性的值，而不是 background.

等 shorthand 属性的值

不同的方法？

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

window.getComputedStyle 不适用于除 Chrome 以外的其他浏览器中的 shorthand 属性

window.getComputedStyle not working for shorthand properties in other browsers except Chrome

javascript

css

google-chrome

internet-explorer

getcomputedstyle

shorthand属性问题

不同的方法？

更多关于 `getComputedStyle`

window.getComputedStyle 不适用于除 Chrome 以外的其他浏览器中的 shorthand 属性

window.getComputedStyle not working for shorthand properties in other browsers except Chrome

javascript

css

google-chrome

internet-explorer

getcomputedstyle

shorthand属性问题

不同的方法？

更多关于 getComputedStyle

更多关于 `getComputedStyle`