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) に関する知識ポイントのまとめ

推薦する

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

ElementUI の el-dropdown に複数のパラメータを実装する方法

最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエ...

Docker を使用した Hadoop クラスターのデプロイに関する詳細なチュートリアル

最近、社内に Hadoop テスト クラスターを構築したいので、docker を使用して Hadoo...

原因不明のMySqlサービス消失の解決策

原因不明のMySqlサービス消失の解決策先ほど、MySQL-Front が突然 MySql を開けな...

高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプル コード

序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...

Docker での Tomcat インストールの 404 問題の解決方法

tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...

jQueryはテーブル行データのスクロール効果を実現します

この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...

VMware に Linux システム (Redhat8) と仮想マシンのネットワーク構成をインストールする方法

目次1. VMwareをインストールする1.1 VMwareworkstationsをダウンロードし...

HTML メタタグの小さなコレクション

<Head>……</head> は <HTML> のファイル ヘ...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

Dockerでrabbitmqをデプロイする際に発生した2つの問題

1. 背景DockerでRabbitMQをデプロイする際に、次の2つの問題が発生します。問題1: ス...

Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

バックグラウンド コントローラー @RequestMapping("/getPDFStre...