jquery google.mapsの要素の取得と操作

Question

実現したいこと

google.mapsのinfowindowに関連する要素をjqueryで操作したい。
どうかご指導お願いします。

問題

<style></style>で操作できるが、jqueryでは操作できない。

具体的には、要素の削除、背景色の設定などの操作

対象とする要素

<div class="gm-style-iw-t::after>
と
<div class="gm-style-iw-d>

コード

<script>
  var infoW = new google.maps.InfoWindow({
      content:'<div id="comment">' + str +'<div>'
  }):
  google.maps.event.addListenerOnce(map,"idle",function(){ infoW.open(map,marker); });

  var iw_t_after = $('.gm-style-iw-t::after');
      iw_t_after.remove();
  //  iw_t_after.css({'cssText':'background-color:#aaa !important'});　など

　var iw_d = $('.gm-style-iw-d');
      iw_d.css({'cssText':'background:#aaf !important'});
</script>

下記のように<style>に設定すると反映される

<style>
.gm-style-iw-d {background:#aaf !important}
.gm-style-iw-t::after { background:#aaf !important}

</style>

Answer 1

::afterはCSSが出現させている疑似要素で、DOM上には存在しないので、jQueryを含めてJavaScriptからの操作は不可能です。

Comments

[old_dog]

ありがとうございました。疑似要素に関して勉強になりました。
ご指摘いただきました個所を一部訂正しました。
疑似要素ではない、実在する要素に関しても、jqueryで取得できません。
再度ご指導いただけましたら幸いです。

Answer 2

new google.maps.Map後に、new google.maps.Marker、new google.maps.InfoWindowを実行し、その後に gm-style-iwを取得しようと試みていたが、おそらく非同期処理のために、取得コード実行時には、gm-style-iwがなく、undifineとなっていたようです。前回、maisumakun様にご指摘いただいたのと類似の内容ということで、自己解決とします。ありがとうございました。