uniapp 要素ノードスタイルの動的変更の詳細な説明

uniapp 要素ノードスタイルの動的変更の詳細な説明

1. スタイル属性をバインドして変更する

最初のステップ: 要素ノードを取得する必要があります

uniApp プロジェクトには windowou オブジェクトがないため、ドキュメントを通じて dom ノードを直接取得することはできません。vue の参照はカスタム コンポーネントに対してのみ有効であり、uniapp のタグに対しては有効ではありません。

uniapp の公式 Web サイトで uni.createSelectorQuery() API を確認してください。このプロパティを使用してラベルのスタイルを取得し、スタイルを動的にバインドして変更できます。

html:

<button type="default" @click="handleFont">クリックするとフォントが大きくなります</button>
<view class="weibo_box" id='index0' :style="{fontSize:vHeight + 'px'}">

対応するjs:

データ(){
	戻る {
		v高さ:22
	}
},


ハンドルフォント(){
	const それ = これ
	uni.createSelectorQuery().select('#index0').boundingClientRect(関数(データ) { 
	  console.log('要素情報0:', データ)
		  その.v高さ +=10
	}).exec()
}

達成された効果:

ここに画像の説明を挿入

次に、refを使用してDOM要素ノードを取得します。

コード:

<button type="default" @click="handleFont">クリックするとフォントが大きくなります</button>
<view class="weibo_box" id='index1' ref="mydom">
	2番目
データ(){
	戻る {
		v高さ:22
	}
},
//一部のコードは無関係なので、handleFont(){を省略します
	const それ = これ
	that.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px'
}

達成された効果:

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • uniappとvueの違いの詳細な説明
  • uniappの無痛トークンリフレッシュ方法の詳細な説明
  • uniappのグローバル変数実装の詳細な説明
  • uni-appのスタイルの詳細な説明

<<:  Linuxで大きなファイルを素早くコピーする方法

>>:  MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

推薦する

純粋な CSS で実装された大きなドロップダウン メニューのサンプル コード

これは純粋に CSS で実装された大きなドロップダウン メニューです。この大きなメニューは、js コ...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

Linux でファイル内の特定の文字の数を数える方法

ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...

Dockerイメージとコンテナの一般的な操作の詳細な説明

画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する

1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...

Vue + OpenLayers クイックスタートチュートリアル

Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...

Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有していま...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

CentOS 7でsambaを使用してフォルダーを共有するための完全な手順

序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...