Comment modifier le style des éléments dom dans uniapp

Uniapp est un framework de développement multiplateforme développé sur la base du framework Vue, qui peut développer simultanément des applications IOS et Android. Dans Uniapp, la modification du style des éléments DOM est très simple et flexible. Ce qui suit présente les méthodes et les détails de modification du style des éléments DOM dans Uniapp.

1. Définir la classe de style dans le modèle

Dans Uniapp, nous représentons généralement le style de l'élément DOM via la classe dans le modèle. Nous devons donc définir le style de classe correspondant en CSS. Par exemple :

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

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

2. Modifier le style de l'élément DOM dans le script

Dans Uniapp, nous pouvons modifier le style de l'élément DOM en récupérant l'objet composant. Dans le script, nous pouvons obtenir les informations sur le nœud de l'élément DOM via l'API uni.createSelectorQuery() pour trouver l'objet nœud DOM correspondant. Ensuite, nous pouvons modifier le style de l'élément DOM via la valeur de l'attribut style de l'objet nœud. Par exemple :

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

Dans le code ci-dessus, nous obtenons l'objet nœud avec la classe de style '.box' via l'API uni.createSelectorQuery(), et lors de l'exécution de la fonction de rappel exec finale, nous obtenons les informations de style d'élément du objet nœud via Modifiez l'attribut backgroundColor dans l'attribut style de l'objet nœud pour modifier la couleur d'arrière-plan de l'élément DOM.

Il est à noter que dans le framework Vue, modifier directement le style des éléments DOM est généralement déconseillé. S'il doit être modifié, la valeur du style doit être liée dynamiquement via des propriétés calculées, telles que :

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

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

Dans le code ci-dessus, nous utilisons des propriétés calculées pour lier dynamiquement la couleur d'arrière-plan de l'élément DOM via la valeur d'état de bgColor . Cette méthode est plus pratique et plus maintenable que la manipulation directe des styles d'éléments DOM.

En plus des méthodes ci-dessus, Uniapp prend également en charge l'utilisation de pseudo-classes et de pseudo-éléments CSS pour modifier le style des éléments DOM. Si vous avez besoin d'en savoir plus, vous pouvez vous référer à la documentation officielle d'Uniapp.

En bref, il existe de nombreuses façons de modifier les styles d'éléments DOM dans Uniapp, et nous pouvons choisir de manière flexible en fonction de nos propres besoins. Pendant l'opération, vous devez veiller à écrire un code clair et facile à maintenir pour éviter les effets néfastes du fonctionnement direct des éléments DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!