|
Вопросы по темеjavascript |
Keyword: 5This code iterates through the
stylesobject and sets each property as a style on the element using bracket notation.One follow-up question could be:
JavaScript const element = document.getElementById("myElement"); const styles = { color: "red", fontSize: "20px" }; for (const property in styles) { element.style[property] = styles[property]; }
- Is there a more concise way to achieve the same result without a loop?
Суть в том, что функция запрашивает селектор и пример текста. Находит элементы на странице по селектору и в конец их текстовых содержаний добавляет введенный ранее текст. Но также необходимо, чтобы к выбранным элементам применялись стили из вложенного объекта 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);
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.
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);
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.
|
|
|
|