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;" >

我想以某种方式，点击，将以下项目存储到单独的变量中..

  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");

链接到 jquery 的 css 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"
});
});