ZaZaKi, a web developer Between Manchester UK & Rotterdam NL. © 2015-2025.

Copy CSS style from an element and pass it to other element, jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<style>
 
.box1 {
background-color:black;
color:red;
line-height:50px;
padding:20px;
}
 
button#copyCSS{
margin:10px;
padding:20px;
}
 
</style>
 
<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>
Categroy:
Front-end , javascripts , JQuery