DOM "stroke-width" attribute returns undefined in IE. Works in all other browsers.

[AR]

this.line = this.obj.graphics[gfx].getDojoShape().getEventSource();                                                      $(this.line).attr("stroke-width") 

This code returns the stroke-width value from the DOM element on a line on my map.

If I use alert() to capture the object in IE 7/8, it displays as undefined. In firebug for Firefox/Safari/Chrome, they all display the correct value.

Here is the code I've written so far (sorry it's a bit messy, I use jQuery for DOM manipulation, instead of destroying/adding new objects as dojo does):

var legendPane = $('div#legendPane')  $(legendPane).on("mouseenter mouseleave", "table.esriLegendLayer > tbody > tr", function(evt){         this.obj = $(this).data()                  if(typeof(this.obj) == "object"){             if( evt.type == "mouseenter"){                 for(gfx in this.obj.graphics){                     if (this.obj.graphics[gfx].geometry.type == "polyline"){                         try{                             this.line = this.obj.graphics[gfx].getDojoShape().getEventSource();                             ////////////////////////////////////////                                                         ///////displays 'undefined' in IE/////                                                         ///////////////////////////////////////                                                          alert($(this.line).attr("stroke-width"))                                                                                        $(this.line).attr("stroke-width") == 2 ? $(this.line).attr("stroke-width", "8") : null;                         }catch (err){}                                                     }else if (this.obj.graphics[gfx].geometry.type == "point") {                         try {                             this.point = this.obj.graphics[gfx].getDojoShape().getEventSource();                             $(this.point).attr("r") == "8" ? $(this.point).attr("r", "13") : null;                              $(this.point).attr("r") == "2.5" ?  $(this.point).attr("r", "4") : null;                                  } catch (err) {}                         }                 }             }else if.....

[derekswingley1]

What are you trying to do?

Mixing and matching jQuery and dojo methods complicates things...if you can describe specifically what you're trying to do we might be able to come up with a cleaner solution.

[AR]

Derek, here's what I'm trying to accomplish:

I'm using the Legend Dijit. When a user hovers over an item in the Legend Dijit (see attached), the corresponding map graphic becomes highlighted, or rather, it's stroke size increases.

Step-by-step:
(1) ...if a user mouseEnters on an item in the Legend Dijit

  if( evt.type == "mouseenter"){.... 

(2) ...loop over the map graphics

for(gfx in this.obj.graphics){....

(3)...and, if this graphic is a polyline

if (this.obj.graphics[gfx].geometry.type == "polyline"){...

(4)...grab the polyline's corresponding DOM element:

 this.line = this.obj.graphics[gfx].getDojoShape().getEventSource()

(5)...use jQuery's attr() method to access this DOM element's "stroke-width" value

 this.stroke = $(this.line).attr("stroke-width")

Step 5 is the problem: this.stroke in IE 7/8 always returns undefined. Firefox/Chrome/Safari all return a value.

I realized Step 5 is the problem by using alert(this.stroke) in IE 7/8, which pops up as "undefined". All other browsers display a value. 


Attachments:
Firefox.png is what is supposed to occur (notice the polyline's increased stroke-width, when I hover on the legend dijit item (highlighted in dark grey)).
IE.png is what is not supposed to occur (notice the polyline stroke does not increase)

Hope this helps,
Aaron

[JeffPace]

(5)...use jQuery's attr() method to access this DOM element's "stroke-width" value

 this.stroke = $(this.line).attr("stroke-width")

IE <8 uses vml, and i believe the attribute is strokeweight, not stroke width

so (5) will need to become

 if(dojox.gfx.renderer==="vml"){
 this.stroke = $(this.line).attr("stroke-weight")
}else{
this.stroke = $(this.line).attr("stroke-width")
}

I am not totally sure its stroke weight, going off http://msdn.microsoft.com/en-us/library/documentformat.openxml.vml.line.strokeweight

if you inspect it in IE's developer toolkit you should see the css property.

[derekswingley1 · Accepted solution]

Rather than digging into the svg or vml properties, can you swap out the graphic's symbol using setSymbol()?

[AR]

@Jeff: I spent a solid hour digging through vml properties (which was my first notion to try, also), but found it to be too much work. Thanks for your suggestion.

@Derek: I was weary of using setSymbol() at first, since similar methods like setWidth() and setStroke require you to refresh() the graphics layer to see changes , which terribly degrades IE 7/8 performance. However, much to my surprise setSymbol() does not require a refresh()!! Thanks for your help.

Here's the finished few lines:

 if( evt.type == "mouseenter"){//...if the event is mouseenter//

  for(gfx in this.obj.graphics){//...loop the map graphics//

        if (this.obj.graphics[gfx].geometry.type == "polyline"){//...if the graphic is a polyline//
                        
                                  this.gfx = this.obj.graphics[gfx]//...create a new reference for it//
       
                                  if(this.gfx.symbol.width == 2){//....by default, the polyline's width is set to 2//
                                  
                                           this.newSymbol = new esri.symbol.SimpleLineSymbol(this.gfx.symbol.style, this.gfx.symbol.color,8)//....create our new symbol with a new width of '8'//
 
                                           this.gfx.setSymbol(this.newSymbol) //...set our newSymbol to this graphic//

                                  }...

Derek and Jeff, thank you for your help!

[derekswingley1]

Glad we could help!