おさかなさんの覚え書き
POST: 2020-02-18 / UPDATED: 2020-03-04

記事にするまでも無い雑記。

HTML CSS JavaScript VScode

記事にするまでもない雑記帳。蓄積ができたら記事にまとめるかもしれません。

VScodeのMarkdownPreviewにCSSを適用する

settings.json
{
    "markdown.styles": [
        "適用させたいCSSのパス"
    ]
}

※CSSの更新は自動で反映されないため、VScodeの再起動などで更新を行う。

npm version

npmでインストールしたもののversion

npm ls

npm自体のversion

npm --version
npm -v

Documentから取得したHTML配列を弄る[JavaScript]

配列.forEach();

HTML要素を取得した配列
例:document.getElementsByClassName("クラス名")
に対して配列.forEach(function(){});を実行した場合Uncaught TypeError: 配列.forEach is not a functionが出ます。

Array.prototype.forEach.call();

HTML要素を取得した配列でも下記ならエラーが生じません。

Array.prototype.forEach.call(配列, function(item) {
    // 処理
});

classList

// 消す
要素.classList.remove("クラス名");
// 追加
要素.classList.add("クラス名");
// クラス名が存在していれば消し、存在していなければ追加する。
要素.classList.toggle("クラス名");
// 置き換え
要素.classList.replace("置き換え前のクラス名", "置き換え後のクラス名");

CSSの優位性

下に行くほど優位になるので、下記のクラス両方をHTML要素に適用した場合該当HTML要素は見えなくなる。(.hideが優位なのでdisplay:none;が指定される)

.show {
    display: block;
}
.hide {
    display: none;
}
TWEET