how to copy style attribute from element A to B using javascript?

Question

i want to assigned css inline style from one element to other element. example.

i want to copy style form btn1 and assign to btn 2

<button id="btn1" style="font-size: 10px;background-color: #4CAF50;  padding: 10px 24px;">Button 1</button>

  <button id="btn2" style="font-size: 10px;background-color: rgb(93, 16, 3); background:beige ; padding: 10px 24px;">Button 2</button>

Possible duplicate of [Set / Copy javascript computed style from one element to another](https://stackoverflow.com/questions/19784064/set-copy-javascript-computed-style-from-one-element-to-another) — Roy Bogado, Sep 03 '19 at 09:13

score 0 · Answer 1 · answered Sep 03 '19 at 09:16

Get the style attribute from the first element and use that value to set the style attribute on the other one.

let styles = document.querySelector('#btn1').getAttribute('style')

document.querySelector('#btn2').setAttribute('style', styles)

<button id="btn1" style="font-size: 10px;background-color: #4CAF50;  padding: 10px 24px;">Button 1</button>
<button id="btn2">Button 2</button>

score 0 · Answer 2 · edited Sep 03 '19 at 09:38

Get style attribute from one element using getAttribute() and apply to other element using setAttribute()

document.querySelector('#btn2').setAttribute('style',document.querySelector('#btn1').getAttribute('style'))

<button id="btn1" style="font-size: 10px;background-color: #4CAF50;  padding: 10px 24px;">Button 1</button>

  <button id="btn2" style="font-size: 10px;background-color: rgb(93, 16, 3); background:beige ; padding: 10px 24px;">Button 2</button>

score 0 · Answer 3 · answered Sep 03 '19 at 09:22

You can use the getAttribute and setAttribute methods of the HTML elements, like:

const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");

btn2.addEventListener("click", copyStyles);

function copyStyles(){
  const style = btn1.getAttribute("style");
  btn2.setAttribute("style", style);
}

<button
  id="btn1"
  style="font-size: 10px; background-color: #4CAF50;  padding: 10px 24px;"
>Button 1</button>

<button
  id="btn2"
  style="font-size: 10px; background-color: rgb(93, 16, 3); background:beige; padding: 10px 24px;"
>Button 2</button>

how to copy style attribute from element A to B using javascript?

3 Answers3