CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefox
Linus
Linus

Reputation: 1614

$(object)[0].offsetTop working in Chrome but not in Firefox

I'm trying to access this property:

$(text)[0].offsetTop

It works fine in Chrome, but in Firefox I get 'undefined'. Is there any way to do this in all browsers?

See: http://jsfiddle.net/qgqr5m6n/3/

$("body").css("margin", "0px");
var svgNS = "http://www.w3.org/2000/svg";

var svgBox = document.createElementNS(svgNS, "svg");
$("body").append(svgBox);  
var text = document.createElementNS(svgNS, "text");
$(svgBox).append(text);

text.innerHTML = "Hello World";

$(text).attr({ "dominant-baseline": "hanging"});
console.log($(text)[0].offsetTop);

$(text).attr({ "x": 0 , "y":  0  });

In case you are wondering what I need this for: I want to align a text of variable font-size in the VERTICAL center of a rectangle. The font size, however, always includes a little gap above the actual top of the letter. What I want is the actual pixel height. This gap above the letter is exactly the value of "offsetTop" after I set "dominant-baseline" to "hanging".

Upvotes: 0

Views: 546

Answers (1)

afmeva
afmeva

Reputation: 869

Instead $(element)[0].offsetTop, use $(element).offset() that returns an object with Top and left.

Upvotes: 1

Related Questions