How to modify the style of dom elements in uniapp

Uniapp is a cross-platform development framework developed based on the Vue framework, which can develop IOS and Android applications at the same time. In Uniapp, modifying the style of DOM elements is very simple and flexible. The following will introduce the methods and details of modifying the style of DOM elements in Uniapp.

1. Define the style class in the template

In Uniapp, we usually represent the style of the DOM element through class in the template. Therefore we need to define the corresponding class style in CSS. For example:

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

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

2. Modify the DOM element style in script

In Uniapp, we can modify the DOM element style by obtaining the component object. In the script, we can obtain the node information of the DOM element through the uni.createSelectorQuery() API to find the corresponding DOM node object. Next, we can modify the style of the DOM element through the style attribute value of the node object. For example:

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

In the above code, we obtain the node object with the style class '.box' through the uni.createSelectorQuery() API, and when executing the final exec callback function, we obtain the elements of the node object Style information, modify the background color of the DOM element by modifying the backgroundColor attribute in the style attribute of the node object.

It should be noted that in the Vue framework, it is generally not encouraged to directly modify the style of DOM elements. If it must be modified, the value of the style should be dynamically bound through calculated properties, such as:

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

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

In the above code, we use calculated properties to dynamically bind the background of the DOM element through the state value of bgColor color. This method is more convenient and maintainable than directly manipulating DOM element styles.

In addition to the above methods, Uniapp also supports the use of CSS pseudo-classes and pseudo-elements to modify the style of DOM elements. If you need to know more, you can refer to the Uniapp official documentation.

In short, there are many ways to modify the DOM element style in Uniapp, and we can choose flexibly according to our own needs. During the operation, you must pay attention to writing clear and easy-to-maintain code to avoid the adverse effects of directly operating DOM elements.

The above is the detailed content of How to modify the style of dom elements in uniapp. For more information, please follow other related articles on the PHP Chinese website!