JS [setProperty]と[styleを直接変更する]の違い
解決したいこと
こんにちは！
jsである要素のstyleを変更しようとしています。最初はstyleを直接変更しようとしていたのですが、エラーが起きてしまいました。そこで、setPropertyを使うことにしたらエラーが起きず正常に機能しました。
この理由がわからないので、教えていただきたいです。
よろしくお願いいたします。
発生している問題・エラー
';' expected.
該当するソースコード
<template>
<div ref="slideRef" class="slide"></div>
</template>
<script lang="ts">
const slideRef = ref<HTMLDivElement>();
slideRef.value && slideRef.value.style.transform = `rotateX(1deg)` // = に上記のエラーが出る。
return {
slideRef
};
</script>
<template>
<div ref="slideRef" class="slide"></div>
</template>
<script lang="ts">
const slideRef = ref<HTMLDivElement>();
slideRef.value && slideRef.value.style.setProperty("transform","rotateX(1deg)") //正常
return {
slideRef
};
</script>
自分で試したこと
前者のコードでエラーが起こる理由は、&&を使ったりしているからなのかなと思いましたが、全然わかりません。
よろしくお願いします。
&&を入れた理由
最初は、
slideRef.value.style.transform = "rotateX(1deg)"
このように書いていました。しかし、Object is possibly 'undefined'.というエラーが出ました。
原因としては、slideRefがundefindの可能性があることからのエラーだと解釈しました。
よって次に、
slideRef.value?.style.transform = "rotateX(1deg)"
と書きました。
すると、上のエラーは消えたのですが、また新たにThe left-hand side of an assignment expression may not be an optional property access.と出てきました。
この意味は、左辺で短縮形は使えないよという意味だと解釈したので、上記のコードと同じ意味になる
slideRef.value && slideRef.value.style.transform = `rotateX(1deg)`
という風に書き直しました。
するとそのエラーが消えて、新たに';' expected.というエラーが=のところに出たので、今回qiitaに質問したという流れになりました。
0
