[英]window.getComputedStyle not working for shorthand properties in other browsers except Chrome
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. window.getComputedStyle在Chrome中提供样式的值,但是在firefox和Microsoft Edge中提供空字符串,而在Internet Explorer中,它不支持该方法。 Here is my code.
这是我的代码。
Whenever the Upvote image is clicked it fires the upDownVote()
function, passing two arguments. 每当单击Upvote图像时,它将触发
upDownVote()
函数,并传递两个参数。 This is the HTML. 这是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; 我通过ajax将三个变量传递给了我的php脚本; Id, type, applicable .
ID,类型,适用 。 Type can store one value, either increment or decrement.
类型可以存储一个值,可以递增或递减。
I wanted, even upvote button is clicked. 我想要,甚至点击了upvote按钮。 Vote value is increase by 1 and background of button is changed.
投票值增加1,按钮背景改变。 Same for the button downvote, but here is decrease in vote value.
按钮减投票相同,但是这是投票价值的下降。 I handle this with
type
variable. 我用
type
变量来处理。
When upvote is clicked again (or double clicked by the user), then there must be decrement in vote value not increment. 当再次单击upvote(或由用户双击)时,投票值必须减少而不是增加。 I handled this with a nested if condition inside the if condition (when type is increment).
我在if条件中(类型为增量时)使用嵌套的if条件处理了此问题。 In that condition I checked if
applicable
is greater than one. 在那种情况下,我检查是否
applicable
(大于1)。 If it is, I changed the type
to decrement and applicable to 0, also the background to its original image. 如果是这样,我将
type
更改为减量并适用于0,也将背景更改为其原始图像。
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. 在这种情况下,
applicable
值大于1。然后必须将type
更改为减量。 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). 当适用的值大于1时(当用户单击向下投票之前单击向上投票时)。 In my php script I increase the vote value by two.
在我的PHP脚本中,我将表决值增加了2。
Same logic for the downvote button. 下投票按钮的逻辑相同。
and here is the JavaScript. 这是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
. 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;
}
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. 如何将按钮的背景值作为
window.getComputedStyle
不能在所有浏览器上正常工作。 I want to know is there any other property by which I can have the background property. 我想知道是否还有其他属性可以让我拥有background属性。
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
. 如果我没有
window.getComputedStyle
的解决方案。
background
is a shorthand property, a combination of background related properties. background
是一种简写属性,是与背景相关的属性的组合。 When you set a background of pink
, it is actually setting a number of background properties, just one of which is backgroundColor
. 当您将背景设置为
pink
,实际上是在设置许多背景属性,其中只有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
. 例如,它实际上可能等效于
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. getComputedStyle
将不返回速记属性的值,除非您在Chrome中发现过。
To get the computed style, look for the value of primitive properties such as backgroundColor
, not that of shorthand properties such as background
. 要获得计算出的样式,请查找基本属性(例如
backgroundColor
的值,而不是速记属性(例如background
。
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. 如您所见,直接在元素上设置样式可能需要您返回并查询样式,而对于类,您可以使用
elt.classList.has()
或使用.toggle()
轻松查询现有的类。 ,或添加或删除。
getComputedStyle
getComputedStyle
更多getComputedStyle
getComputedStyle
is a rather specialized API that should only be necessary in special situations. getComputedStyle
是一个相当专业的API,仅在特殊情况下才需要。
For more on the issue of getComputedStyle
and shorthand properties, see this question . 有关
getComputedStyle
和简写属性的更多信息,请参见此问题 。 A bug was reported against FF and you can find it here . 已报告FF错误,您可以在这里找到。
See this MDN page . 请参阅此MDN页面 。 It says that
CSSStyleDeclaration
(which is what is returned by getComputedStyle
) has a getPropertyCSSValue
method which 它说
CSSStyleDeclaration
(由getComputedStyle
返回)是有一个getPropertyCSSValue
方法,该方法可以
returns ... null for Shorthand properties .
对于速记属性返回... null 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.