Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' && color != 'transparent' || jQuery.nodeName
(parent, "body"))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
<html>
<head>
</head>
<body>
<div class="categories">
<div class="content">
<div class="body">
<ul id="category-list">
<li class="division">
<ul>
<li class="category selected" style="background-
color:red;">
<div class="title">
<a href="/suv" class="category-
suv">SUVs (6)</a>
</div>
</li>
<li class="category category_69564">
<div class="title">
<a href="/4by4" class="category-
general">4x4 (6)</a>
</div>
</li>
<li class="category category_73293">
<div class="title">
<a href="/hybrid"
class="category-hybrid">Hybrid</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I can get back the background color of the element "<li
class="category selected" > correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as follows,
<html>
<head>
<style type="text/css">
.content .division .category.selected {
background-color: red;
}
</style>
</head>
I always get back the value "transparent" even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or "red" in the latter case.
Thanks in advance,
John
>
> On Jan 11, 2:31 pm, John Arrowwood <jarro...@gmail.com> wrote:
>
> > As a QA tester with a lot of test automation experience, a bit of advice:
> > Ask if the product would not ship if it wasn't red. If the answer is no,
> > then you might not want to waste your time. Unless you have automated
> > everything else about the functionality of the application, and are looking
> > for things to automate, but I would be surprised if you had gotten that far
> > already! :)
>
> > There are some other things you can do, too, to make it easier or faster.
> > If you want to discuss it off-list, email me at j...@irie-inc.com.
>
> > On Mon, Jan 11, 2010 at 9:54 AM, John <john.jian.f...@gmail.com> wrote:
> > > Thanks for your reply. I will try to see if the background color on
> > > the parent works or not.
>
> > > As for checking the "red" color, I need to do a UI test and check if
> > > the background color
> > > is set correctly. That is to say, I am testing other people's code and
> > > web page.
>
> > > Thanks,
>
> > > John
>
> > > On Jan 11, 12:41 pm, John Arrowwood <jarro...@gmail.com> wrote:
> > > > The short answer is because the background color of the item you have
> > > > selected is in fact transparent.
>
> > > > Your style makes the <li> tag red. Then you query on a child element
> > > that
> > > > has no color specified. The background color of the child element is
> > > > 'transparent' which means that the color of something up the tree is
> > > > what
> > > > you will see.
>
> > > > You will never see 'red' by looking at the child element. But what you
> > > can
> > > > do (and jquery.color.js does this) is while you get 'transparent' then
> > > you
> > > > can look at the parent object. You can walk up the tree until you get
> > > what
> > > > you are looking for.
>
> > > > But before you go down that road, why are you looking to see the color
> > > > of
> > > > the element? If you can describe what you are trying to do in more
> > > general
> > > > terms, someone may be able to give a better suggestion on how to
> > > accomplish
> > > > it.
>
> > > > On Mon, Jan 11, 2010 at 7:39 AM, John <john.jian.f...@gmail.com> wrote:
> > > > > Hi,
>
> > > > > I used jQuery 1.3.2 and Firefox for the following html
>
> > > > > <html>
> > > > > <head>
> > > > > <style type="text/css">
> > > > > .content .division .category.selected {
> > > > > background: red;
> > > > > }
>
> > > > > </style>
> > > > > </head>
> > > > > <body>
>
> > > > > <div class="categories">
> > > > > <div class="content">
> > > > > <div class="body">
> > > > > <ul id="category-list">
> > > > > <li class="division">
> > > > > <ul>
> > > > > <li class="category selected">
> > > > > <div class="title">
> > > > > <a href="/suv" class="category-
> > > > > suv">SUVs (6)</a>
> > > > > </div>
>
> > > > > </li>
>
> > > > > <li class="category category_69564">
> > > > > <div class="title">
> > > > > <a href="/4by4" class="category-
> > > > > general">4x4 (6)</a>
> > > > > </div>
>
> > > > > </li>
> > > > > <li class="category category_73293">
> > > > > <div class="title">
> > > > > <a href="/hybrid"
> > > > > class="category-hybrid">Hybrid</a>
> > > > > </div>
> > > > > </li>
> > > > > </ul>
> > > > > </li>
> > > > > </ul>
> > > > > </div>
> > > > > </div>
> > > > > </div>
>
> > > > > </body>
> > > > > </html>
>
> > > > > I used the following css command to get back the background color:
>
> > > > > $("#category-list > li.division:eq(0) ul > li:eq(0) a").css
> > > > > ("background-color");
>
> > > > > but it always returned the value "transparent" instead of the "red"
> > > > > color rgb(255,0,0).
> > > > > I also tried "backgroundColor" and it did not work either
> > > > > ("transparent"). How to get back
> > > > > the correct background color?
>
> > > > > Thanks in advance,
>
> > > > > John
>
> > > > --
> > > > John Arrowwood
> > > > John (at) Irie (dash) Inc (dot) com
> > > > John (at) Arrowwood Photography (dot) com
> > > > John (at) Hanlons Razor (dot) com
> > > > --http://www.irie-inc.com/http://arrowwood.blogspot.com/
>
> > --
> > John Arrowwood
> > John (at) Irie (dash) Inc (dot) com
> > John (at) Arrowwood Photography (dot) com
> > John (at) Hanlons Razor (dot) com
> > --http://www.irie-inc.com/http://arrowwood.blogspot.com/
