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，按钮背景改变。按钮downvote也是如此，但这里的投票价值会减少。我使用type变量处理此问题。

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

但是，如果用户在单击downvote按钮后单击upvote按钮，该怎么办？在那种情况下applicable值大于1.然后必须将type更改为减量。这不应该发生。为此在我的嵌套if条件我添加检查downvote按钮的背景也。它必须与页面加载时相同。

当适用的值大于1时（用户在点击downvote之前单击upvote）。在我的PHP脚本中，我将投票值增加了两倍。

downvote按钮的逻辑相同。

这是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在所有浏览器中都无法正常工作。我想知道是否有任何其他属性可以让我拥有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()轻松查询现有类，或使用{{1}切换}，或添加或删除。

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

1 个答案:

速记属性问题

一种不同的方法？

更多关于`.toggle()`

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

1 个答案:

速记属性问题

一种不同的方法？

更多关于.toggle()

更多关于`.toggle()`