javascript - インラインスタイルをjquery変数に格納する

Question

私は次のimgタグを持っています、

 <img id="image1" src="URL" alt="image1" name="image1" width="137" height="119" border="0" style="position: relative; left: -355px; top: 62px;" >

どういうわけか、onclick、次の項目を別の変数に格納したいと思います。

  style="position: relative; left: -355px; top: 62px;"

  var left = -355px
  var top = 62px

それは可能ですか？ありがとうございました！

Answer 1

var imageInfo = {style:null, left:null, top:null};

$('#image1').on('click', function() {
  var $this = $(this);
  imageInfo.style = $this.attr('style');
  imageInfo.left = $this.css('left');
  imageInfo.top = $this.css('top');
  console.log('Image Clicked: ', imageInfo);
});

Answer 2

もちろん、これは可能です。次のようなことを試しましたか。

$('#image1').on('click', function () {
    var style = 'style="' + $(this).attr('style') + '"';
    var left = $(this).css('left');
    var top = $(this).css('top');

    alert(style);
    alert(left);
    alert(top);
});

例： http： //jsfiddle.net/9ZXHX/

Answer 3

jqueryを使用して画像を取得し、そこからその属性にアクセスできます。

var img = $("#image1");
var imgStyle = img[0].getAttribute("style");
var imgLeft = img.css("left");
var imgRight = img.css("right");

css用のjqueryのAPIへのリンク：http：//api.jquery.com/css/

関数内：

function getDetails(imgId)
{
 var imgDetails = {};
 var img = $("#"+imgId);
 imgDetails.imgStyle = img[0].getAttribute("style");
 imgDetails.imgLeft = img.css("left");
 imgDetails.imgRight = img.css("right");
 return imgDetails;
}

これは、この動作の例と、質問で要求された出力を示すフィドルです：http: //jsfiddle.net/j7eYf/1/

Answer 4

jqueryを使用することをお勧めします。これにより、作業がはるかに簡単になります。この例を試してみてください

$("#your trigger").live('click',function ()
{
$("#image1").css({
position: "absolute",
top: 62 + "px",
left: -355 + "px"
});
});