JS中的CSS for vanilla Javascript类

Question

如果我像这样创建一个vanilla JS组件:

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    var html = `
      <div>
        <p>Some dummy content</p>
      </div>
    `;
    document.getElementById(el).innerHTML = html;
  }
}

我可以在JS中添加CSS吗？我的意思是:

const styles = {
  backgroundColor: 'palevioletred',
  color: 'papayawhip',
};

所以上面的渲染方法将如下所示:

render(el) {
  var html = `
    <div style={styles}>
      <p>Some dummy content</p>
    </div>
  `;
  document.getElementById(el).innerHTML = html;
}

是否可以在Angular/React等框架之外进行？

Answer 1

您正在将JS对象用于HTML(String).因此,您必须将对象转换为有效的HTML字符串:

const styles = {
  // CSS key is `background-color` instead of `backgroundColor`
  'background-color': 'palevioletred', 
  color: 'papayawhip',
}


render(el) {
  // Loop every keys, and create an array contain every
  // key:value
  // join every items on array to create a single String.
  var string_styles = Object.keys(styles).map(s => { 
    return s + ":" + styles[s]
  }).join(';')

  // Or
  string_styles = JsToCss(styles)  


  var html = '<div style="' + string_styles + '">' +
      '<p>Some dummy content</p>' +
    '</div>';
  document.getElementById(el).innerHTML = html;
}

// Decomposed function:
let JsToCss = (styles) => {
  let keys = Object.keys(styles) 
  // keys = [ 'background-color', 'color']

  let css_values = keys.map(key => {
    return key + ":" + styles
  })
  // css_values = [
  //     'background-color:palevioletred', 
  //     'color:papayawhip'
  // ]

  return css_values.join(';') 
  // return "background-color:palevioletred;color:papayawhip;" 
}

代码未经测试,但这是个主意