This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

  • Online music poke me ah!
  • Music blog source code online!
  • The previous several articles talked about the installation and deployment of Docker, the operation is relatively simple. (Entry level)
  • Recently, when a component is wrapped in a project, it is passed to the CSS through JavaScript, and the CSS takes the variable and dynamically assigns the value to change the style.
  • Next, we will share how JavaScript is passed to Css, to control Css styles, and so on.
  • Are you ready?

Lucky to understand what Li Bai said, “flying straight down three thousand feet” ~

First, there are problems

You want to control the style of CSS through JS.

Here’s why this idea exists.

Two, restore the scene

A percentage component that varies in width and height depending on the size passed in.

Three, analysis

Because the width and height are written in CSS, but I want to control the width and height by passing in the data parameters, so JS control CSS.

So we have two options:

  • I can use computed property to assign a value to a variable based on a parameter, and then bind it to :style, where I use var() to get the data we set in the row.

  • You can also get elements by passing in parameters, and there is a setProperty method to set a new CSS property, as well as modify existing properties in the CSS declaration block.

Iv. Solutions

There are two options, using var() and setProperty()

As follows:

4.1 use var ()

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number.default: 54,}},computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'}}}},</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>
Copy the code

4.2 setProperty ()

<template>
  <div class="box" ref="box">
      <span></span>
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number.default: 54,}},mounted() {
    this.$refs.box.style.setProperty('--box-height'.this.heigt / 200 + 'rem')}},</script>
<style scoped lang="less">@height: var(--box-height) // define the variable. }</style>
Copy the code

Five, the blind area

5.1 A JS variable cannot be defined by two variables in less

@height: var(--height);
@height2: var(--height);

// A JS variable cannot be defined by two variables in less
Copy the code

5.2 The var() function cannot be calculated

Focus on the CMD error message.

@height: var(--height) / 2;

The // var() function cannot be evaluated
Copy the code

Six, Tips,

Var in style does not use an operation, such as height: -var(–heigh), where subtraction is used.

Seven, small knowledge

The setProperty() method interface sets a new value for an object that has declared CSS styles.

7.1 grammar

style.setProperty(propertyName, value, priority);
Copy the code

7.2 parameter

  • PropertyName: is a DOMString that represents the changed CSS property.

  • Value Optional: It is a DOMString with new attribute values. If not specified, it is treated as an empty string.

    • Note: value cannot contain “! “Important” should use the priority parameter.

  • Priority: Optional DOMString allows setting “important” CSS priority. If not specified, it is treated as an empty string.

7.3 the return value

undefined

7.4 abnormal

DOMException (NoModificationAllowedError) : if the property or decorative pieces for read-only, throw this exception.

Viii. Knowledge points

Var (), setProperty(), and JS modify CSS styles

Afterword.

Use JavaScript to calculate the value, CSS through -var to receive the parameters, easy to modify our style, suggested in the project to use it.

Results SCSS, Less really sweet ~

👍 if it is helpful to you, your thumbs up is the lubricant of my progress.

Related literature

Share a vUE tip learned in one minute

Methods to use variables in data in VUE style

In the past to recommend

Front-end, deploy dist to Nginx

Multi-picture detailed explanation, one time to understand the prototype chain (ten thousand words)

Lao Shi said that everything is the object, you also believe?

Vue-cli3 builds the component library

Vue implements dynamic routing (and the interviewer blows project highlights)

Axios manipulation in a project you didn’t know about (Core principles of handwriting, compatibility)

VuePress builds project component documentation

Vue-typescript-admin-template background management system

The original link

Juejin. Cn/post / 703583…