Copy CSS style from an element and pass it to other element, jQuery
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color:black;
color:red;
line-height:50px;
padding:20px;
}
button#copyCSS{
margin:10px;
padding:20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.getCSS = function (style) {
var self = this,
obj = {};
$.map(!$.isArray(style) ? style = style.split(‘ ‘) : style, function (key) {
obj[key] = self.css(key);
});
return obj;
};
var cur = $(‘.box1’).getCSS(‘backgroundColor line-height color padding’);
$("#copyCSS").click(function(){
$(‘.box2’).css(cur);
});
});
</script>
</head>
<body>
<div class=" box1">Box1</div>
<button id="copyCSS"> Copy CSS properties from Box1 to Box2</button>
<div class=" box2">Box2</div>
</body>
</html>
