Как из объекта применить стили к элементу?

Question

Суть в том, что функция запрашивает селектор и пример текста. Находит элементы на странице по селектору и в конец их текстовых содержаний добавляет введенный ранее текст. Но также необходимо, чтобы к выбранным элементам применялись стили из вложенного объекта styles. Закомментировал в примере три строчки, так как понимаю, что должно работать не так. Потому что если стилей во вложенном объекте будет больше, то не сработает.

let modify = {
  selector: document.querySelectorAll(prompt("Enter selector", "")),
  text: prompt("Enter the text", ""),
  styles: {
    color: "green",
    ["font-weight"]: 700,
    ["font-style"]: "italic"
  }
};

let changeElem = item => {
  let {
    selector,
    ...rest
  } = modify;

  for (let elems of modify.selector) {
    elems.innerHTML = `${elems.innerHTML} ${modify.text}`;
    //elems.style.color = modify.styles.color;
    //elems.style["font-weight"] = modify.styles["font-weight"];
    //elems.style["font-style"] = modify.styles["font-style"];
  }
};

changeElem(modify);

<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>

  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
  </ul>
  <span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span>
</div>

Answer 1

let modify = {
  selector: document.querySelectorAll(prompt("Enter selector", "")),
  text: prompt("Enter the text", ""),
  styles: {
    color: "green",
    ["font-weight"]: 700,
    ["font-style"]: "italic"
  }
};

let changeElem = item => {
  let {
    selector,
    ...rest
  } = modify;

  for (let elems of modify.selector) {
    elems.innerHTML = `${elems.innerHTML} ${modify.text}`;
    
    Object
      .entries(modify.styles)
      .forEach(([name, value]) => {elems.style[name] = value});
  }
};

changeElem(modify);

<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>

  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
  </ul>
  <span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span>
</div>

Answer 2

let modify = {
  selector: document.querySelectorAll("ul li"),
  text: "test",
  styles: {
    color: "green",
    ["font-weight"]: 700,
    ["font-style"]: "italic"
  }
};

let changeElem = params => {
  for (let elems of params.selector) {
    elems.innerHTML += ' ' + params.text;
    for (let key in params.styles) {
      elems.style[key] = params.styles[key];
    }
  }
};

changeElem(modify);

<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>

  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
  </ul>
  <span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span>
</div>

БЛОГ НА HUSL

Как из объекта применить стили к элементу?

Ответы (2 шт):