cssを変更したいです

すみません、教えてください。
cssのプロパティを動的に変更したいです。

以下のcssとHTMLがあります。

css
1.sample {
2  background-color: pink;
3}

HTML
1<p class="sample">
2  背景色
3</p>

HTMLに変更を加えないことを前提に背景色を変更したいです。

私が考えたのはTypeScript側でquerySelectorを使ってプロパティを取得し変更できないかと思ったんですが
値がnullで取得できず困ってます...。

TypeScript
1  foo = document.querySelector<HTMLElement>(".sample");
2  change() {
3    console.log(this.foo);
4    // null
5  }

何か良い方法ご存じであれば教えてください。

m.ts10806

2021/02/17 03:09

そもそもquerySelector時点ではとれてますか？ changeはどこで実行されますか？ TypeScriptは詳しくないですが、一般的にそのタイミングでのthisはメソッド実行した要素になるんでは。

miyabi_pudding

2021/02/17 04:14 編集

Angularでやっているなら、制御しているコンポーネントの内容と、使用しているテンプレートHTMLのコードをなるたけ全て記載してください。でないと回答しようがありません。また、テンプレートHTMLにAngular構文を書いた方が、圧倒的に処理がしやすいのですが、HTMLを変えれない理由などがあるのでしょうか？

miyabi_pudding

2021/02/17 04:20

> TypeScriptは詳しくないですが、一般的にそのタイミングでのthisはメソッド実行した要素になるんでは。一応、TypeScriptは、thisで、クラスないしインスタンス自身を指すことができます。 thisと宣言子の省略の場合は、クラスないしインスタンスのプロパティを参照しようとします。といって、質問者さんが他の部分を記載されていないので、なんともいえませんが・・・。（場合によってはその懸念もありえる）

行動規範の内容に同意します

回答1件

ベストアンサー

typescript
1import { Component } from "@angular/core";
2
3@Component({
4  selector: "my-app",
5  templateUrl: "./app.component.html",
6  styleUrls: ["./app.component.css"]
7})
8export class AppComponent {
9  // foo = document.querySelector<HTMLElement>(".sample");
10  // ここでプロパティを定義する
11  private foo: HTMLElement = null;
12  change() {
13    // HTML要素を突っ込む
14    this.foo = document.querySelector<HTMLElement>(".sample");
15    console.log(this.foo);
16  }
17}

あとは、styleプロパティの改変でいけるかと。

もしくは、Angularでやるならば、下記のように、フレームワークの仕様を使っていく方が望ましいです。

html
1<!-- Angularの仕様においてのプロパティの変更 -->
2<p class="sample" [style.background-color]="bgC">背景色</p>
3
4<button (click)="change()">背景色を変更します</button>

typescript
1import { Component } from "@angular/core";
2
3@Component({
4  selector: "my-app",
5  templateUrl: "./app.component.html",
6  styleUrls: ["./app.component.css"]
7})
8export class AppComponent {
9  // パブリック（HTMLテンプレート上でも使える）変数を定義
10  public bgC = "";
11  change() {
12    // 文字列を定義して、背景色を変更
13    this.bgC = "#FF0000";
14  }
15}