3

I want to add all the computed style that will be generated using getComputedStyle() into another button. I have tried with .cssText but it seems something else needs to be done here. any suggestion what can be required to make this happen.

//get styles and storing into sessionstorage

const getStyle = getComputedStyle(document.getElementById("testButton"));
sessionStorage.setItem("getStylesItem", JSON.stringify(getStyle));

//set styles from session object into a button

const jsonValue = JSON.parse(sessionStorage["getStylesItem"]);
const elem = document.getElementById('TestButton1');
elem.style.cssText = jsonValue.cssText;

//dummy json value

{
alignContent: "normal",
alignItems: "center",
alignSelf: "auto",
alignmentBaseline: "auto",
all: "",
animation: "none 0s ease 0s 1 normal none running",
animationDelay: "0s",
animationDirection: "normal",
animationDuration: "0s",
animationFillMode: "none"
}

enter image description here

Tammy
  • 1,122
  • 5
  • 19
  • 50
  • `jsonValue.cssText` – does your JSON value actually have such a property? (Can’t tell from the shortented example you have shown.) – 04FS Sep 25 '20 at 12:34
  • @04FS thanks for your time. So I want to apply all the styles into another button. Any tricks to do so? – Tammy Sep 25 '20 at 12:36
  • create a css class and store all style in it. Store css class name in sessionStorage and apply css class when you want to reuse on another button. – deepak Sep 25 '20 at 12:39
  • You will have to loop over the object you got there. You could either try and assemble a string that can be assigned to `cssText` from that - but then you will probably have to undo the camelCasing (I don’t think assigning to cssText will work with that.) Assigning each of them directly might make more sense, that works with the camelCase property names as they are. – 04FS Sep 25 '20 at 12:40
  • If i apply each with property from my json then it will be hardcoded. So want to apply as it is so it will be more robust or future. – Tammy Sep 25 '20 at 12:41
  • @Tammy check my answer. i edited some typos. – polyglot Sep 25 '20 at 12:48
  • Duplicate of [Set / Copy javascript computed style from one element to another](https://stackoverflow.com/q/19784064/215552) – Heretic Monkey Sep 25 '20 at 12:55
  • I think that the answer here proves that this question is not overly broad, and should be reopened. – Kelderic Sep 25 '20 at 13:10
  • @AndyMercer I would think we'd just close it as a duplicate of the link I posted though... – Heretic Monkey Sep 25 '20 at 13:16

2 Answers2

3

Loop the CSS object and then form a string. You should use the inline styles for cssText.

const jsonValue = JSON.parse(sessionStorage["getStylesItem"]);
const elem = document.getElementById('TestButton1');

let cssText = '';
for (const property in jsonValue) {
  if (!Number.isNaN(parseInt(property))) continue;
  cssText += `${property}:${jsonValue[property]}`;
}

elem.style.cssText = cssText;

CSSStyleDeclaration object has numeric properties like 0: "align-content", 1: "align-items" so you need to filter non-numeric properties only.

polyglot
  • 822
  • 5
  • 9
1

This can achieved by using for loop as well.

//For setting seesion storage

const button = document.getElementById("test");
if (button) {
  const getStyle = getComputedStyle(button);
  let testStyle = {};
  for (const key in getStyle) {
    testStyle[key] = getStyle[key];
  }
  sessionStorage.setItem("testStyles", JSON.stringify(testStyle));
}

//For getting the value and apply in your button

  const elem = document.getElementById('button1');
  const getParam = sessionStorage(JSON.parse["testStyles"]);
  if (elem && getParam) {
    const elemStyle = elem.style;
    if (elemStyle) {
      for (const key in getParam) {
        elemStyle[key] = getParam[key];
      }
    }
  }
Go Prestige
  • 46
  • 2