Is there a way to cut and paste or clone CSS from one element to another using JQuery?
I have a situation where I am wrapping an image with a span and I want to remove all CSS from the image and apply it to the span. Is there a way to do this using JQuery?
JQuery
$(img).wrap('<span />');
Style sheet:
img { border: 5px solid red; padding: 10px; … needs to allow for anything }
I would like to do this without editing HTML or CSS. I need a way to really remove CSS from one element and place it on top of another.
a source to share
There's also toggleClass (), which just applies the class if it's not already on the element, and removes it if it is.
$("#imageIDHere,#otherThing").toggleClass("theClass");
I have a feeling looking at your question that you are planning some kind of dynamic CSS structure. You can absolutely change classes, CSS selectors and their properties dynamically using jQuery plugin stuff like this . However, doing this without any class structure in the whole or overarching system is likely to give you a lot of headaches down the line.
a source to share
Can't you apply your CSS class to the span (and remove from the image)?
Look . addClass and . removeClass .
a source to share
I would probably do something like this:
/*CSS*/
.style{border:solid 1px red;}
/*JQuery*/
$("#imageIDHere").removeClass("style");
$("#spanIDHere").addClass("style");
/*or*/
$("#imageIDHere").removeClass("style").parent().addClass("style"); //assuming the span is the parent of the image
a source to share
You can use and to remove the style that suits your requirement. removeClass
removeAttr
<strong> Examples:
$('selector').removeClass('some_class'); // this removes some_class
$('selector').removeClass(); // this removes all classes
$('selector').removeAttr('class'); // this removes inline classes
$('selector').removeAttr('style'); // this removes inline styling
$('selector').removeAttr('id'); // this removes id styling
a source to share