setProp() — vue Function Reference

Architecture documentation for the setProp() function in style.ts from the vue codebase.

Function typescript WebPlatform RuntimeModules calls 1 called by 1

Entity Profile

WebPlatform→ RuntimeModules→ setProp() — vue Function Reference

Dependency Diagram

graph TD
  872edfe3_0bb5_ddac_4c2b_fd7490ff422f["setProp()"]
  8b26f627_0982_0df0_c3cb_2f1f73bd5429["style.ts"]
  872edfe3_0bb5_ddac_4c2b_fd7490ff422f -->|defined in| 8b26f627_0982_0df0_c3cb_2f1f73bd5429
  5c00cc10_b214_96f8_72b4_73c977da0a61["updateStyle()"]
  5c00cc10_b214_96f8_72b4_73c977da0a61 -->|calls| 872edfe3_0bb5_ddac_4c2b_fd7490ff422f
  0adc57ca_cd61_4d46_5c43_47cc9b05ba38["normalize()"]
  872edfe3_0bb5_ddac_4c2b_fd7490ff422f -->|calls| 0adc57ca_cd61_4d46_5c43_47cc9b05ba38
  style 872edfe3_0bb5_ddac_4c2b_fd7490ff422f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/style.ts lines 14–37

const setProp = (el, name, val) => {
  /* istanbul ignore if */
  if (cssVarRE.test(name)) {
    el.style.setProperty(name, val)
  } else if (importantRE.test(val)) {
    el.style.setProperty(
      hyphenate(name),
      val.replace(importantRE, ''),
      'important'
    )
  } else {
    const normalizedName = normalize(name)
    if (Array.isArray(val)) {
      // Support values array created by autoprefixer, e.g.
      // {display: ["-webkit-box", "-ms-flexbox", "flex"]}
      // Set them one by one, and the browser will only set those it can recognize
      for (let i = 0, len = val.length; i < len; i++) {
        el.style[normalizedName!] = val[i]
      }
    } else {
      el.style[normalizedName!] = val
    }
  }
}