Sunday 15 June 2014

javascript - Getting dimensions of background-image -


I'm trying to get the background-image's width and height of the element. When you click on it, it should show it inside the element ("200 300" in this case).

HTML:

  & lt; Div id = 'test' & gt; & Lt; / Div & gt;   

CSS: #Test {width: 100px; Height: 100 pixels; Background-image: url (http://placehold.it/200x300); }

Javascript:

  $ ('# test'). ('Click', function () {$ (this) .text (getDimensions ($ (this)));}); Var getDimensions = function (items) {var img = new Image (); // Create new image img.src = item.css ('background-image'). Replace (/ url \ (| \ $$ / ig, ''); // source = clicked element background-image return img.width + '' + 'img.height; // return dimension};   

The problem here is that only in Chrome , all other major browsers come back "I do not know what the reason for this graphic is entirely graphic Is not loaded?

The problem is that some browsers cite CSS, and load it Trying to (In the case of the belt) "". I updated you. ("Click", function () {$ (this) .text (getDimensions ($ (this)))}} var getDimensions = function (Items) {var img = new Image (); img.src = item.css ('background-image'). (/ Url \ (| \ $ $ | "/ ig, ''); return img.width + '' + Img.height;};

No comments:

Post a Comment