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

來源

2016-06-21 niksos

保存原來的背景，自定義數據屬性和更新基於數據屬性的第二個回調函數值堅持緩存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選項。

來源

2016-06-21 06:18:42

您可以使用簡單的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>

來源

2016-06-21 06:16:37 Satpal

使用$(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) 
});

來源

2016-06-21 06:18:49 fuzz

你可以嘗試以下方法：

我們可以把原來的背景圖片爲$.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>

來源

2016-06-21 06:22:31 vijayP

JQuery如何獲得內聯樣式值

回答

相關問題