JQuery如何获得内联样式值

问题描述：

我想要做悬停图像，但我如何获得原始内联CSS背景值返回？JQuery如何获得内联样式值

<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg"> 

$("div[data-alt-bg]").hover(function() { 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
    $(this).css('background-image', backgroundnew) 
}, function() { 
    var backgroundOrig = XXX??????????XXXXXX?????????? 
    $(this).css('background-image', backgroundOrig) 
});

答

保存原来的背景，自定义数据属性和更新基于数据属性的第二个回调函数值坚持缓存original图像。

$("div[data-alt-bg]").hover(function() { 
 
    $(this).data('bg', $(this).css('background-image')); 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    $(this).css('background-image', backgroundnew) 
 
}, function() { 
 
    $(this).css('background-image', $(this).data('bg')) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">hi</div>

FYI：总是最好还是用css因为不存在与:hover pseudo-class选项。

答

您可以使用简单的CSS规则来实现。

div { 
 
    background-image: url('orig.jpg') 
 
} 
 
div:hover { 
 
    background-image: url('https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p200x200/11182094_10153030955874652_1696866992468729401_n.jpg?oh=ba799406635ee2de0f20e497826076e6&oe=57D55DF6&__gda__=1472963214_d7a1f64437e4e3b7fa6cef8520d091d3') 
 
}

<div>Something</div>

但是如果你仍然想使用jQuery。使用.data()

$("div[data-alt-bg]").hover(function() { 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    //Persisit original in cache 
 
    var orig = $(this).css('background-image'); 
 

 
    $(this).data('orig', orig).css('background-image', backgroundnew) 
 
}, function() { 
 
    //Read data from cache 
 
    var backgroundOrig = $(this).data('orig'); 
 

 
    $(this).css('background-image', backgroundOrig) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">something</div>

答

使用$(this).data("alt-bg");

$("div[data-alt-bg]").hover(function() { 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
    $(this).css('background-image', backgroundnew) 
}, function() { 
    var backgroundOrig = $(this).data("alt-bg"); // use data 
    $(this).css('background-image', backgroundOrig) 
});

答

你可以尝试以下方法：

我们可以把原来的背景图片为$.data改变之前对hover和hoverout我们再次阅读：

$("div[data-alt-bg]").hover(function() { 
 
    var backgroundnew = "url('" + $(this).attr('data-alt-bg') + "')"; 
 
    var oldBackground = $(this).css('background-image'); 
 
    $(this).data("originalBackground",oldBackground); 
 
    $(this).css('background-image', backgroundnew) 
 
}, function() { 
 
    var backgroundOrig = $(this).data("originalBackground"); 
 
    
 
    console.log(backgroundOrig); 
 
    
 
    $(this).css('background-image', backgroundOrig) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div style="background-image: url(orig.jpg)" data-alt-bg="orig_hover.jpg">Hello</div>

JQuery如何获得内联样式值

相关推荐