LWC Style 動的指定

HTML:

    <div class="picdiv">
        <!-- <img src={backpic}> -->
        <div class="picdivchild slds-text-heading_small">{checkNo}</div>
    </div>

CSS:
.picdiv {
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content:space-between;
}

.picdivchild {
    align-items: center;
    margin-top: 60%;
    margin-bottom: 5%;
}

JS:
    import gymsimgs from '@salesforce/resourceUrl/gymsimgs';
    hasRendered = false;
    renderedCallback() {
        if (this.hasRendered) return;
        this.hasRendered = true;
        const style = document.createElement('style');
        style.innerText = `.picdiv { background-image:url(${this.backpic}) }`;
        this.template.querySelector('.picdiv').appendChild(style);
    }

    get picb4() {
        return gymsimgs + '/ver_b_4.png';
    }

    get backpic() {
        return gymsimgs + '/ver_b_1.png';
    }

css 参考URL
クリック、動きによって動的表示する。

  HTML:
       <div class="hidden">
          表示/非表示する内容
       </div>
       <img style="width:35px" src={emojishowbtn} onclick={showmoji}>

  CSS:
       .hidden { display: none; }
       .show { display: block; }


　JS:
　showmoji() {
    this.showemojicss(true);
  }

  showemojicss(isShow) {
    if(isShow) {
      const secondDiv = this.template.querySelector('.hidden'); //
      //スタイルを追加する例
      secondDiv.classList.remove('hidden');
      secondDiv.classList.add('show');
    } else {
      const secondDiv = this.template.querySelector('.show'); // 
      //スタイルを追加する例
      secondDiv.classList.remove('show');
      secondDiv.classList.add('hidden');
    }
  }