js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。
ソースコードはこちら
let btn1 = function (e) {
//btn2
console.clear();
console.log("btn1");
let p = document.getElementsByTagName("p");
let style1 = [["backgroundColor", "fontSize", "color"], ["#000000", "20px", "#ffffff"]];
for (const key in p) {
if (p.hasOwnProperty(key)) {
const element = p[key];
for (var i = 0; i < style1[0].length; i++) {
element.style[style1[0][i]] = style1[1][i];
}
}
}
};
let btn2 = function (e) {
//btn2
console.clear();
console.log("btn2");
let p = document.getElementsByTagName("p");
let style2 = {
backgroundColor: "#ffffff",
fontSize: "20px",
color: "#000000"
};
for (const key in p) {
if (p.hasOwnProperty(key)) {
const element = p[key];
for (const key2 in style2) {
element.style[key2] = style2[key2];
}
}
}
};
document.body.style.backgroundColor = "#0b222b";
document.getElementById("btn1").addEventListener("click",btn1);
document.getElementById("btn2").addEventListener("click",btn2);デモページ
https://zip358.com/tool/demo17/
