uniapp で dom 要素のスタイルを変更する方法

Uniapp は、Vue フレームワークをベースに開発されたクロスプラットフォーム開発フレームワークで、IOS アプリケーションと Android アプリケーションを同時に開発できます。 Uniapp では、DOM 要素のスタイルを変更するのは非常に簡単かつ柔軟です。以下では、Uniapp で DOM 要素のスタイルを変更する方法と詳細を紹介します。

1. テンプレートでスタイル クラスを定義する

Uniapp では、通常、テンプレートのクラスを通じて DOM 要素のスタイルを表します。したがって、CSS で対応するクラス スタイルを定義する必要があります。例:

<template>
  <view class="box"></view>
</template>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

2. スクリプトで DOM 要素のスタイルを変更します。

Uniapp では、コンポーネント オブジェクトを取得することで DOM 要素のスタイルを変更できます。スクリプトでは、uni.createSelectorQuery() API を通じて DOM 要素のノード情報を取得し、対応する DOM ノード オブジェクトを見つけることができます。次に、ノード オブジェクトの style 属性値を使用して DOM 要素のスタイルを変更できます。例:

<script>
  export default {
    methods: {
      changeStyle() {
        uni.createSelectorQuery().select('.box').fields({ node: true, size: true })
          .exec(function(res) {
            res[0].node.style.backgroundColor = 'blue';
          })
      }
    }
  }
</script>

上記のコードでは、uni.createSelectorQuery() API を通じてスタイル クラス '.box' を持つノード オブジェクトを取得し、最後の exec コールバック関数を実行するときに要素を取得します。ノード オブジェクトのスタイル情報の場合は、ノード オブジェクトの style 属性の backgroundColor 属性を変更して DOM 要素の背景色を変更します。

Vue フレームワークでは、DOM 要素のスタイルを直接変更することは一般に推奨されていないことに注意してください。変更する必要がある場合は、スタイルの値を次のような計算プロパティを通じて動的にバインドする必要があります。

<template>
  <view :style="{backgroundColor: bgColor}" class="box"></view>
</template>

<script>
  export default {
    data() {
      return {
        bgColor: 'red'
      }
    },
    methods: {
      changeStyle() {
        this.bgColor = 'blue';
      }
    }
  }
</script>

上記のコードでは、計算プロパティを使用して、状態を通じて DOM 要素の背景を動的にバインドします。 bgColor の色の値。この方法は、DOM 要素スタイルを直接操作するよりも便利で保守しやすいです。

上記の方法に加えて、Uniapp は DOM 要素のスタイルを変更するための CSS 疑似クラスと疑似要素の使用もサポートしています。さらに詳しく知りたい場合は、Uniapp の公式ドキュメントを参照してください。 。

つまり、Uniapp では DOM 要素のスタイルを変更する方法がたくさんあり、ニーズに応じて柔軟に選択できます。操作中は、DOM 要素を直接操作することによる悪影響を避けるために、明確で保守しやすいコードを記述するように注意する必要があります。

以上がuniapp で dom 要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。