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

推薦する

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

表のセルの内容が超過した場合に省略記号効果を表示する(実装コード)

例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...

html-webpack-plugin の使用方法の詳細な説明

最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...

クロスブラウザの問題に対する 5 つの解決策 (要約)

簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

JavaScript の 3 つの BOM オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

Alibaba Cloud に Docker をインストールする際の問題と解決策

質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

単一テーブルのMySQLバックアップとリストアに関する簡単な説明

A. MySQLバックアップツールxtrabackupのインストール1. Percona 公式 xt...

一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介

MyISAM、MySQLでよく使われるストレージエンジン特性: 1. 同時実行性とロックレベル2. ...

CocosCreatorでJSZip圧縮を使用する方法

CocosCreator バージョン: 2.4.2 jszipの実践的なプロジェクトアプリケーション...

Docker+nacos+seata1.3.0 のインストールと使用設定チュートリアル

これに先立ち、1日かけてやってみました。Seataは使い方が簡単で超シンプルですが、インストールや設...

回転するフリップカードアニメーションの効果を実現するCSS

回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。 1. まず2つのボックス...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...