skaterdav85 Posted January 19, 2010 Share Posted January 19, 2010 So I have a span object: <span class='group3' id='0' onmouseover='changeColors(this.id)'>some stuff</span> And I want to swap colors using this JS, but it doesnt work and I dont get any errors. function changeColors(id) { document.getElementById(id).style.color=document.getElementById(id).style.backgroundColor; document.getElementById(id).style.backgroundColor=document.getElementById(id).style.color;} Any ideas? Link to comment Share on other sites More sharing options...
justsomeguy Posted January 19, 2010 Share Posted January 19, 2010 Both of those are going to be the same color. If the foreground starts black, and the background starts white, first you set the foreground to the background, so now the foreground is white, and the background is white. Then you set the background to the foreground, and they're both still white.If you get through that and it's still not working, print the values you're setting things to in order to make sure you're setting it to the value that's expected. Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 19, 2010 Author Share Posted January 19, 2010 Ohhh I see. Makes sense. I changed it to: function changeColors(id) { document.getElementById(id).style.backgroundColor=document.getElementById(id).style.color; document.getElementById(id).style.color='white';} but the background color doesnt change. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 19, 2010 Share Posted January 19, 2010 Print out the value you're trying to set it to. Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 19, 2010 Author Share Posted January 19, 2010 well i tried doing alert(document.getElementById(id).style.color); but there is nothing in the alert. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 19, 2010 Share Posted January 19, 2010 Well that's why it's not changing.I believe the style properties of an element are only populated if the styles were set via Javascript, not CSS. Seems counter-intuitive, but I think that's the way it works. If you want to determine what the current color actually is I think you need to get the class name of the element and then loop through the stylesheets collection to find that class and check the properties of it. I haven't done much of that with Javascript, so I'm not sure if there's a better way. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 19, 2010 Share Posted January 19, 2010 It looks like jQuery is able to help with that:http://docs.jquery.com/CSS/css Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 19, 2010 Author Share Posted January 19, 2010 Interesting point. I guess you cant read styles set in CSS via JS, but only set them. I'm actually writing my custom php/JS code inside wordpress so im pretty limited on this project, and I cannot use jquery. I guess I'll just use standard colors across haha. Link to comment Share on other sites More sharing options...
just2comment Posted January 20, 2010 Share Posted January 20, 2010 maybe using getComputedStyle as (more or less) explained at https://developer.mozilla.org/en/DOM/element.style? Link to comment Share on other sites More sharing options...
Synook Posted January 21, 2010 Share Posted January 21, 2010 If you want to use jQuery just modify the header template to include the jQuery script file. Link to comment Share on other sites More sharing options...
just2comment Posted January 23, 2010 Share Posted January 23, 2010 I've found that if you explicitly set the style properties in the HTML you can access and change them via .style, look at the example I've made with your code <html> <span id='0' onmouseover='changeColors(this.id)'>some stuff</span> <span id='1' style="color:black;background-color:white" onmouseover='changeColors(this.id)'>some stuff</span> <script type="text/javascript"> function changeColors(id) { alert("color " + document.getElementById(id).style.color); alert("backgroundColor " + document.getElementById(id).style.backgroundColor); document.getElementById(id).style.backgroundColor=document.getElementById(id).style.color; document.getElementById(id).style.color='white'; } </script><html> span '1' works as expected (I think) in IE and Mo, while span '0' doesn't... I didn't experiment with setting properties via CSS, taking into account to set color as well as background-color... Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 23, 2010 Author Share Posted January 23, 2010 oh wow. thats interesting. So i guess you cant read style property values when they are in the head of your document or in an external stylesheet. Thanks for trying that out! Link to comment Share on other sites More sharing options...
just2comment Posted January 23, 2010 Share Posted January 23, 2010 I think the key here is "explicit", i.e. if the values are set in HTML/CSS or the browser assign them by default. If you try with CSS please send the result, I don't have enough time right now to experiment but I'm interested in thi issue. Also, I think you can always read properties via computedStyle but you can't set them... again this has to be verified... just a guess... Link to comment Share on other sites More sharing options...
jeffman Posted January 23, 2010 Share Posted January 23, 2010 Assigning CSS in an element's tag element works because that is what element.style accesses. If you change the style of an element, the information gets stored someplace, right? Ever wonder where? The style sheet is not modified. The style attribute associated with the tag is modified.But I hate writing style in my tags, and especially as a work around to serve some other thing. DOM methods do exist. Sadly, there are cross-browser differences. computedStyle is one of them. (It does not exist for setting styles, BTW. Just use element.style for that.)Here's a recent write-up: getStyleValue()If you need to actually examine the color value, be sure to read about color2hex at the same site.You don't have to understand the write-ups to use the functions. Link to comment Share on other sites More sharing options...
just2comment Posted January 23, 2010 Share Posted January 23, 2010 Ok, I think we are approaching the point... so far we found true that changing styles inline works, i.e. "writing style in my tags" (and I agree that's not a great idea, "...and especially as a work around to serve some other thing").However, I don't understand two related statements: "I believe the style properties of an element are only populated if the styles were set via Javascript, not CSS." (from Post #6) "If you have ever noticed a menu that slides gracefully open, you have seen JavaScript setting and resetting CSS properties. And it’s really quite easy." (http://www.sophox.com/wordpress/?p=759) Because (correct me if I'm wrong) I've seen that some properties that were not set in the tags "appear" when they are set in javascript but do not modify the "UI", is this what you mean with "The style sheet is not modified. The style attribute associated with the tag is modified."?Hmmm... I think I'm writing too much "on the fly"... as soon as possible I'll make some experiments and ask/comment with some more insight... I don't have much experience in CSS... maybe it's time to work a little more on this.Anyway, thanks for the feedback. Link to comment Share on other sites More sharing options...
jeffman Posted January 23, 2010 Share Posted January 23, 2010 Any property of any HTML document exists both as human-readable text information and as interpreted information used internally by the browser. It is entirely up to the browser manufacturer to determine what form the internal information will take, and we really shouldn't worry about it. It could even be that the human-readable version is only generated when you ask for it; the difference really doesn't matter.The point is that if an element has any properties at all (text, id, style, whatever), that information exists as human-readable text somewhere. When you assign an element a color using CSS, the initial information is stored as text in the stylesheet. If you modify that color with JavaScript, the new information also has to be stored as human-readable text somewhere. The color data is not floating around in space. It's written down somewhere.So the question is, where?The stylesheet itself is NOT modified. We know this because a statement like element.style.color = "" restores any color that was originally set by a stylesheet.What does get modified is the style attribute of the element, which is normally represented in the element's HTML tag. This is called the element's inline style. An element might have NO style attribute in its tag in the original hard-coded version that exists on your server. But if you change the element's color with something like element.style.color = "#ffa", the browser will create a style attribute and put it in the tag. And that is where the human-readable version of the color information exists.Say you have the following HTML hard-coded into your document: <div id="container"> <p id="txt">HELLO</p></div> Now in JavaScript do this: document.getElementById("txt").style.color = "#ffffaa";alert (document.getElementById("container").innerHTML); The alert will show you something like this: <p id="txt" style="color:#ffffaa">HELLO</p> Or maybe: <p id="txt" style="color:rgb(255, 255, 0)">HELLO</p> When JavaScript modifies an element's style, it does so by modifying the element's inline style property. Even if no style attribute existed before, JavaScript adds one.For the same reason, style information that is hard-coded into a tag's style attribute is immediately available to JavaScript. element.style is the inline style attribute. Link to comment Share on other sites More sharing options...
just2comment Posted January 23, 2010 Share Posted January 23, 2010 Thanks, I thought computedStyle was the right place, but it is not... It returns the "right" contents in Op, but it does not in Mo, and I didn't verify in IE. However, the right place seems to be "...the element's HTML tag..." as you pointed out, at least in Op and Mo it works. And this would imply some extra work like searching in a string + possibly "translate" values and/or property name as pointed out in the write ups you referred to, but at least there is some way to do so.Is computedStyle a W3C definition? Are Mo (3.5.4) and Op (10.01) W3C compliant? Link to comment Share on other sites More sharing options...
jeffman Posted January 23, 2010 Share Posted January 23, 2010 getComputedStyle is a W3C recommendation: http://www.w3.org/TR/DOM-Level-2-Style/css...rideAndComputedFF, SF, and OP are compliant, as usual. The IE currentStyle property is not, and the values it contains can be significantly different from values obtained with getComputedStyle. It's just a different thing altogether.I have no idea what you mean by "right" contents. Remember that a computed style is the result of every style declaration that has an effect on an element. This will be especially obvious when your definitions are in relative units, like percents or ems. The returned value will be in px. W3C specifies that a computed style is returned in absolute units.As for color values, as the stuff I linked you to indicates, they can be returned in a number of formats. Since W3C allows colors to be defined in a variety of ways, it follows that they can be returned in a variety of ways. W3C does not (as far as I can tell) require color values to be returned the same way that they are assigned. Each browser (except IE) seems to store color values in a single format (6-char hex or rgb) and that is the format in which they are returned, regardless of the original definition.IE comes closest to preserving the author's format, but it also makes changes in some circumstances. A color defined as a 3-char hex will be returned as a 3-char hex, and one defined as a 6-char hex will be returned as a 6-char hex. But a color defined as an RGB percentage will be returned as an RGB absolute. (This is true for IE7, anyway.) Link to comment Share on other sites More sharing options...
just2comment Posted January 23, 2010 Share Posted January 23, 2010 Ok, I didn't know about ...a computed style is the result of every style declaration that has an effect on an element...however, FF and OP produce different results so one of them doesn't seem to be W3C recommendation compliant (I can send the code and output produced in my computer, it's simple, if you want), or the W3C recommendation can be implemented producing different results. I understand the different ways/units of representing colors and other stuff in JavaScript. Link to comment Share on other sites More sharing options...
jeffman Posted January 23, 2010 Share Posted January 23, 2010 Sure. send it. I'm curious to see the difference. Link to comment Share on other sites More sharing options...
just2comment Posted January 24, 2010 Share Posted January 24, 2010 Code: <html> <head> <style type="text/css"> p { color: red; border: dotted; } </style> <head> <body> <div id="container"> <p id="txt">HELLO</p> </div> <script type="text/javascript"> alert(document.getElementById("container").innerHTML); alert("Color: " + document.getElementById("txt").style.color); alert("Background Color: " + document.getElementById("txt").style.backgroundColor); alert("Border Style: " + document.getElementById("txt").style.borderStyle); alert("Border Color: " + document.getElementById("txt").style.borderColor); alert("Computed Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("color")); alert("Computed Background Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("background-color")); alert("Computed Border Style: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("border-style")); alert("Computed Border Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("border-color")); document.getElementById("txt").style.color = "yellow"; document.getElementById("txt").style.backgroundColor = "#0000ff"; document.getElementById("txt").style.borderStyle = "solid"; document.getElementById("txt").style.borderColor = "black"; alert(document.getElementById("container").innerHTML); alert("Color: " + document.getElementById("txt").style.color); alert("Background Color: " + document.getElementById("txt").style.backgroundColor); alert("Border Style: " + document.getElementById("txt").style.borderStyle); alert("Border Color: " + document.getElementById("txt").style.borderColor); alert("Computed Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("color")); alert("Computed Background Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("background-color")); alert("Computed Border Style: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("border-style")); alert("Computed Border Color: " + getComputedStyle(document.getElementById("txt"), null).getPropertyValue("border-color")); document.getElementById("txt").style.color = ""; </script> </body><html> Output is (copied from the screen, excluding innerHTMLs, which are ok, I think)OP---Color:Background Color:Border Style:Border Color:Computed Color: #ff0000Computed Background Color: transparentComputed Border Style: dottedComputed Border Color: #ff0000Color: #ffff00Background Color: #0000ffBorder Style: solidBorder Color: #000000Computed Color: #ffff00Computed Background Color: #0000ffComputed Border Style: solidComputed Border Color: #000000FF--Color:Background Color:Border Style:Border Color:Computed Color: rgb(255, 0, 0)Computed Background Color: transparentComputed Border Style:Computed Border Color:Color: yellowBackground Color: rgb(0, 0, 255)Border Style: solid solid solid solidBorder Color: black black black blackComputed Color: rgb(255, 255, 0)Computed Background Color: rgb(0, 0, 255)Computed Border Style: Computed Border Color: Link to comment Share on other sites More sharing options...
jeffman Posted January 24, 2010 Share Posted January 24, 2010 If you have not installed the Firefox DOM Inspector, do so. One of the things it displays is the computed stles of an element. VERY handy for debugging.You will see that FF does not have a computed style attribute called "border-style"; instead it has things like "border-left-style" and so on. Same thing for border colors.If you add a line of code to your script that changes the left border to something different from the others, the return value of "border-style" will look like CSS shorthand: four values in a row.Which just means that FF and OP have a different internal representation of these values. They are allowed to do this because the W3C specification does not explain how the computed value should be stored or outputted. Maybe it should.It's annoying. But we're not seeing non-compliance in either of these. Just a different interpretation of the rules in a place where interpretation has to be made. Link to comment Share on other sites More sharing options...
just2comment Posted January 24, 2010 Share Posted January 24, 2010 I see, DOM interface is maintained but internal representation is left to the browser choice, and if you need to know the current style values (which I think the "initial" post was about...) either: 1) dig in text fields/information, or 2) you should know the browser (i.e. there are cross-browser issues...). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.