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

当再次点击upvote(或用户双击)时,必须减少投票值而不是增量.我在if条件中使用嵌套的if条件处理它(当type是increment时).在那种情况下,我检查了是否applicable大于一.如果是,我将更改为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和的CSS 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 是一个相当专业的API,只有在特殊情况下才需要.

有关问题getComputedStyle和速记属性的更多信息,请参阅此问题.针对FF报告了一个错误,您可以在此处找到它.

请参阅此MDN页面.它说CSSStyleDeclaration(返回的是getComputedStyle)有一个getPropertyCSSValue方法

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