window.getComputedStyle不适用于除Chrome之外的其他浏览器中的速记属性 [英] window.getComputedStyle not working for shorthand properties in other browsers except Chrome

问题描述

window.getComputedStyle在Chrome中给出样式的值，但在firefox和Microsoft Edge中，它给出一个空字符串，在Internet Explorer中，它表示它不支持该方法。这是我的代码。

每当Upvote图像被点击它会触发 upDownVote（） 。这是HTML。

 < div id =upvotetitle =Click to UpVoteonClick =upDownVote（'increment'，< ？php echo $ id;？>）;>< / div> 
< div id =downvotetitle =Click to DownVoteonClick =upDownVote（'decrement'，<？php echo $ id;？>）;>< / div> 
  

我通过ajax传递了三个变量到我的php脚本： ID，类型，适用。
类型可以存储一个值，增量或减量。

我想要，即使upvote按钮被点击。投票价值增加1，按钮背景改变。相同的按钮downvote，但这里是减少投票价值。我使用类型变量处理。

当用户再次点击upvote（或者被用户双击）时，表决值必须递减。我在if条件内嵌套的if条件（当类型是增量时）处理这个。在这种情况下，我检查了适用是否大于一。如果是，我将类型更改为减量并适用于0，也是其原始图像的背景。

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

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

downvote按钮的逻辑相同。

这里是JavaScript。

  var applicable = 0; //确定适用于投票与否。 
 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; //确定类型（递增或递减）。 
 if（type ===increment）{
 upvote.style.background =url（img / image-sprite-1.jpg）0px -40px; 
 
适用++; // 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; 
 apply ++; 
 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从这里开始。 
} 
  

的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 无法正常工作所有的浏览器。
我想知道是否有任何其他属性，我可以有background属性。

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

解决方案

简写属性问题

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

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

请参阅此 MDN页< a>。它说， CSSStyleDeclaration （这是 getComputedStyle 返回）有一个 getPropertyCSSValue 方法

返回... 对于Shorthand属性为空。




window.getComputedStyle give the style's value in Chrome, but in firefox and Microsoft Edge it gives an empty string and in Internet Explorer, it say that it doesn't support that method. Here is my code.

Whenever the Upvote image is clicked it fires the upDownVote() function, passing two arguments. This is the 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>

I passed three variables to my php script through ajax; Id, type, applicable. Type can store one value, either increment or decrement.

I wanted, even upvote button is clicked. Vote value is increase by 1 and background of button is changed. Same for the button downvote, but here is decrease in vote value. I handle this with type variable.

When upvote is clicked again (or double clicked by the user), then there must be decrement in vote value not increment. I handled this with a nested if condition inside the if condition (when type is increment). In that condition I checked if applicable is greater than one. If it is, I changed the type to decrement and applicable to 0, also the background to its original image.

But what if when user clicked the upvote button after the clicking the downvote button. In that condition applicable value is more than 1. And then must change the type to decrement. That should not happen. for this In my that nested if condition I add check the background of downvote button also. It must be the same as before when the page load.

when applicable value is more than 1 (when user clicked upvote before clicking the downvote). In my php script I increase the vote value by two.

Same logic for the downvote button.

and here is the 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 of upvote and 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;
}

Everything works fine but now I'm stuck. How to get the background value of buttons as window.getComputedStyle not working fine all the browsers. I want to know is there any other property by which I can have the background property.

Also, I want to know how can I do the same thing with different logic. If I can't have the solution for window.getComputedStyle.

解决方案

The shorthand property problem

background is a shorthand property, a combination of background related properties. When you set a background of pink, it is actually setting a number of background properties, just one of which is backgroundColor. For instance, it is probably actually doing the equivalent of rgb(255, 165, 0) none repeat scroll 0% 0% / auto padding-box border-box.

getComputedStyle will not return the value of shorthand properties, except in Chrome as you've discovered.

To get the computed style, look for the value of primitive properties such as backgroundColor, not that of shorthand properties such as background.

A different approach?

However, this is not really how you want to be doing things. Instead of setting styles on your elements directly, you're going to find your code to be much cleaner if you add and remove classes from your elements, and then define the rules for the classes. As you've found, setting styles directly on elements may require you to then go back and query the style, whereas with classes, you can easily query the existing class with elt.classList.has(), or toggle with .toggle(), or add, or remove.

More on getComputedStyle

getComputedStyle is a rather specialized API that should only be necessary in special situations.

For more on the issue of getComputedStyle and shorthand properties, see this question. A bug was reported against FF and you can find it here.

See this MDN page. It says that CSSStyleDeclaration (which is what is returned by getComputedStyle) has a getPropertyCSSValue method which

returns ... null for Shorthand properties.

这篇关于window.getComputedStyle不适用于除Chrome之外的其他浏览器中的速记属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！