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は、where in()順序ソートを実装するためにfind_in_set()関数を使用します。

この記事では、MySQL で find_in_set() 関数を使用して where in() の順...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

DeepinでPyenvをインストールする手順

序文これまでは、/bin/ ディレクトリのソフトリンクを変更して Python のバージョンを切り替...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

モバイルレイアウトにvw+remを使用する方法

まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

MySqlを最適化するためにnot inを使用する方法

最近、プロジェクトで選択クエリを使用する際に、未使用の主キー ID を除外するために not in ...

Vueは双方向データバインディングを実装します

この記事の例では、双方向データバインディングを実装するためのVueの具体的なコードを参考までに共有し...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

Vue ページをリフレッシュするために provide と injection を適用する

目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...

ウェブページの要素の検査とソースコードの表示の違いについて

Chrome ブラウザで Web ページを開くと、ページを右クリックすると 2 つの非常によく似たオ...