主页 / 问题 / 1121798
Accepted
Black Fire
Asked:2020-05-07 20:18:07 +0000 UTC2020-05-07 20:18:07 +0000 UTC

如何将样式应用于对象中的元素？

  • 772

底线是该函数要求选择器和文本示例。通过选择器查找页面上的元素，并将先前输入的文本附加到其文本内容的末尾。但也需要将嵌套样式对象中的样式应用于所选元素。我在示例中注释掉了三行，因为我知道什么会出错。因为如果嵌套对象中有更多样式，它将不起作用。

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>

javascript

2 个回答

  1. Best Answer

    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>

    • 2 

  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>

    • 2

相关问题