8

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.

4

1 回答 1

9

速记属性问题

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属性和速记属性的更多信息，请参阅此问题。针对 FF 报告了一个错误，您可以在此处找到它。

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

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

于 2015-08-30T12:32:46.697 回答