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

Posted 2023-03-06

技术标签:

【中文标题】window.getComputedStyle 不适用于除 Chrome 之外的其他浏览器中的速记属性【英文标题】：window.getComputedStyle not working for shorthand properties in other browsers except Chrome 【发布时间】：2015-11-24 13:06:57 【问题描述】：

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 条件（当类型为增量时）处理此问题。在那种情况下，我检查了applicable 是否大于一。如果是，我将type 更改为递减并适用于0，也适用于其原始图像的背景。

但是，如果用户在点击了反对按钮后点击了赞成按钮怎么办。在那种情况下applicable 值大于 1。然后必须将type 更改为递减。那不应该发生。为此，在我的嵌套 if 条件中，我还添加了检查 downvote 按钮的背景。页面加载时必须和之前一样。

当适用值大于 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.

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 在所有浏览器中都不能正常工作。我想知道是否有任何其他属性可以让我拥有背景属性。

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

【问题讨论】：

在您的 JS 开头，您正在查询 upvote 和 downvote 元素的样式。这些样式是如何设置的？我通过外部样式表设置这些样式，JavaScript 位于页面底部。所以我的风格应该先设置然后我进行查询。你能展示样式表的相关部分吗？我已经编辑了我的问题并添加了那些样式表。 【参考方案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() 切换，或添加，或删除。

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

简写属性问题

不同的方法？

更多关于getComputedStyle

更多关于`getComputedStyle`