青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

jQueryの様々な指定の仕方。疑似要素とかidとか

idotdesign.net

jQueryで疑似要素(:afterとか)を変えたいとき。でも疑似要素はjQueryから指定できません。そういうときはClassのつけ外しで対応しましょう。

.imgOnGreen::before {
  background-color: rgba($color: #26c52e, $alpha: 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: '';
}
$("#img1").addClass("imgOnGreen");

qiita.com

jQueryで1つの指定したものに複数のCSSの値を設定したいとき。

$(".js-imgTop").css("transform": "translateX(100px)");
$(".js-imgTop").css("overflow": "hidden");

みたいにバラバラで指定するのではなく、

$(".js-imgTop").css({
  "transform": "translateX(100px)"
  "overflow": "hidden"
});

こんな感じで書けます。

とはいえ、Javascript側でCSSの値を操作すると管理が面倒になるので、


一方、jQueryで複数のIDとかを指定して同じ動きをさせたいとき。

gotohayato.com

  $(".imgTop:nth-of-type(1), .thumnail:nth-of-type(1)").attr({
    src: "./img/img1.jpg"
  });

みたいに同時にIDを指定できます。