typescript vanilaで复数スタイル

Posted 2021-05-20

const reUnit = /width|height|top|left|right|bottom|margin|padding/i

type setStyleProps = {
  node: HTMLElement
  att: string
  val: string
  style: {}
}

const setStyle = ({ node, att, val, style }: setStyleProps) => {
  style = style || node.style

  if (style) {
    if (val === null || val === '') {
      val = ''
    } else if (!isNaN(Number(val)) && reUnit.test(att)) {
      val += 'px'
    }

    if (att === '') {
      att = 'cssText'
      val = ''
    }

    style[att] = val
  }
}

export const setStyles = (el: HTMLElement, hash: CSSStyleDeclaration) => {
  const hasCSSTextFeature = typeof el.style.cssText !== 'undefined'

  let originStyleText
  const originStyleObj = {}

 hasCSSTextFeature
  ? originStyleText = el.style.cssText
  : originStyleText = el.getAttribute('style')

  originStyleText!.split(';').forEach(item => {
    if (item.indexOf(':') !== -1) {
      const obj = item.split(':')
      originStyleObj[obj[0].trim()] = obj[1].trim()
    }
  })

  const styleObj = {}

  Object.keys(hash).forEach(item => setStyle({
    node: el,
    att: item,
    val: hash[item],
    style: styleObj
  }))

  const mergedStyleObj = Object.assign({}, originStyleObj, styleObj)
  const styleText = Object.keys(mergedStyleObj)
    .map(item => item + ': ' + mergedStyleObj[item] + ';')
    .join(' ')

 hasCSSTextFeature
  ? el.style.cssText = styleText
  : el.setAttribute('style', styleText)
}