开发者

How can I remove a background-image attribute?

I have this code :

if (pansel.val开发者_运维技巧() == "1") 
     $(#myDiv).css('background-image', 'url(/private_images/guida_check_category.jpg)'); 
else 
     $(#myDiv).css({ 'background-color': '#ffffff' });

and I see that, when I apply the background-image, the follow code :

$(#myDiv).css({ 'background-color': '#ffffff' });

doesnt remove the image and put the white background color. The image still present!

How can I totally remove that background-image attribute?


Try this:

if (pansel.val() == "1") 
     $("#myDiv").css('background-image', 'url(/private_images/guida_check_category.jpg)'); 
else {
     $("#myDiv").css({ 'background-color': '#ffffff' });
     $("#myDiv").css('background-image', 'none');
}


This code...

$myDiv = $('#myDiv');
$myDiv.css('background-image', 'none');

will not actually remove the background-image property. It will make jQuery set an inline style of 'background-image:none' to the myDiv element, which may not be what you want.

If you later apply a class to the myDiv element which uses a background image or attempt to use 'background: url('... to set a background image, the inline style will override and the background image will not show.

To remove the property, I would suggest that you just set the 'background-image' value to nothing, then it will disappear from the inline style all together and you can manipulate it much more easily...

if (pansel.val() === "1") {
    $myDiv.css('background-image', 'url(/private_images/guida_check_category.jpg)'); 
} else {
    $myDiv.css('background-color', '#ffffff').css('background-image', ''); 
    //the value will be set to white with the image 'empty', so it will disappear from inline styles
}


background:0 will remove the entire background css


$('*').css('background', 'transparent')

see: Remove background color/images for all elements with jQuery


If you want to completely remove the style attribute you can do something like this

var oDiv = document.getElementById("myDiv");
oDiv.style.removeProperty("background-color");

I have found that setting it to transparent creates some odd conflicts, if you later do other color operations on that area. Removing the attribute works better if you are trying to revert back to some default setting specified in your css.


Get, Set and Delete Div Background Image In jQuery

Get Background image

You can use the below code for getting the background image in jQuery.

$(".btn-get").click(function() {
var bg = $('div').css('background-image'); // get background image using css property
bg = bg.replace('url(','').replace(')','');
alert(bg); });   

Set Background Image

You can use the below code for setting the background image using the jQuery CSS property.

 $(".btn-set").click(function() {
 var img = 'http://www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg';
 var bg = $('div').css('background-image',"url(" + img + ")");
});

Remove Background Image

You can use the below code for removing the background image using the jQuery CSS property.

$(".btn-remove").click(function() {
    var bg = $('div').css('background-image','none');
}); 


$(element).css('background-image', '')

I don't know what is happens in backstage but img is removed from UI.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜