setProp() — vue Function Reference

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

Function typescript WebPlatform RuntimeDirectives calls 2 called by 1

Entity Profile

WebPlatform→ RuntimeDirectives→ setProp() — vue Function Reference

Dependency Diagram

graph TD
  311fb23f_f8ca_2e0c_855b_13518ffc8566["setProp()"]
  bb6b3e47_4412_613f_a390_b2681286129d["updateStyle()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 311fb23f_f8ca_2e0c_855b_13518ffc8566
  e667d00b_a47f_c88a_e931_82b5917dddc2["hyphenate()"]
  311fb23f_f8ca_2e0c_855b_13518ffc8566 -->|calls| e667d00b_a47f_c88a_e931_82b5917dddc2
  a0dae001_ecb7_6b42_ca22_98c727b657f3["normalize()"]
  311fb23f_f8ca_2e0c_855b_13518ffc8566 -->|calls| a0dae001_ecb7_6b42_ca22_98c727b657f3
  style 311fb23f_f8ca_2e0c_855b_13518ffc8566 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
    }
  }
}