uniapp dynamically modifies styles

Preface

In UniApp, we often need to dynamically modify styles, such as switching day and night mode, adjusting font size, etc. At this time we need to master some skills of dynamically modifying styles. This article will introduce several commonly used methods to help you better control style changes.

1. Use Vue’s calculated properties

The calculated properties in Vue can dynamically calculate new property values ​​based on dependent variables, so we can use it to dynamically modify the style.

For example, we can define a variable isNight in data to control day and night mode, and then calculate the corresponding style in computed:

<template>
  <div :style="themeStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isNight: false // 默认为白天模式
    }
  },
  computed: {
    themeStyle () {
      return {
        // 日间模式样式
        backgroundColor: this.isNight ? '#37474f' : '#fafafa',
        color: this.isNight ? '#fff' : '#000',
        // 其他属性
      }
    }
  }
}
</script>

In this way, as long as the isNight variable changes, The style can be updated automatically.

2. Use ref to obtain elements

Sometimes, we need to directly manipulate the style of DOM elements. At this time, we can use ref to obtain elements.

<template>
  <div ref="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = this.$refs.myDiv
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

In this way, we can dynamically modify the style in the changeStyle method.

3. Use JavaScript to set styles

The most direct way is to use JavaScript to set styles. Just get the style object of the element and then modify the value of the corresponding attribute.

<template>
  <div id="myDiv">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeStyle () {
      const myDiv = document.getElementById('myDiv')
      myDiv.style.color = 'red'
      myDiv.style.fontSize = '20px'
      // 其他样式
    }
  }
}
</script>

This method does not require writing additional style rules, but it should be noted that we must ensure the timing of modifying the style to avoid overwriting the original style rules.

4. Global styles and local styles

I believe you have encountered such doubts when using UniApp to develop projects: Why do some styles appear on other pages after they are defined in App.vue? Can it take effect?

This is because the styles in App.vue are global styles and will be shared by all pages. If we need to define local styles, we can define them in the style file of the corresponding page.

For example, we define a global style in App.vue:

<style>
/* 全局样式 */
body {
  background-color: #fafafa;
}
</style>

This style will be shared by all pages. If you need to modify the style in a certain page, you can modify the style in the page. defined in the file.

<style>
/* 局部样式 */
body {
  background-color: #37474f;
}
</style>

In this way, the body style of the page will override the global body style.

Conclusion

This article introduces some common methods of dynamically modifying styles, including using Vue's calculated properties, using ref to obtain elements, using JavaScript to set styles, global styles and local styles, etc. I hope it will be helpful to everyone who encounters dynamic modification of styles in UniApp development.

The above is the detailed content of uniapp dynamically modifies styles. For more information, please follow other related articles on the PHP Chinese website!