Question

如果我像这样创建香草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方法看起来像这样：

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

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

Answer 1

您正在将JS对象用于HTML（字符串）。因此，您必须将对象转换为有效的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;" 
}

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

Answer 2

您需要将对象转换为有效的CSS。

<div style={styles}>不起作用，因为您要在此处将对象转换为字符串，并且转换不会产生所需的结果。

const styles = {
  backgroundColor: 'palevioletred',
  color: 'papayawhip',
};

console.log(styles.toString());

您可以使用JSON.stringify()，但即使如此，您仍需要删除花括号，将逗号转换为分号，删除多余的引号，并将驼峰式的名称转换为带连字符的名称。

我已经在下面完成了所有这些操作，并将其分解为各个步骤以显示必须执行的操作，但是可以将其浓缩为单个语句，甚至可以使用正则表达式使其更加紧凑。但是，这应该可以为您提供想法。

仅供参考：您需要在模板文字前面加一个$来标识它。

const styles = {
  backgroundColor: 'palevioletred',
  color: 'papayawhip',
};

let cssString = JSON.stringify(styles);
console.log(cssString);

// Remove the braces
cssString = cssString.replace("{","").replace("}","");
console.log(cssString);

// Remove the quotes
cssString = cssString.replace(/"/g, "")
console.log(cssString);

// Change comma to semi-colon and add trailing semi-colon
cssString = cssString.replace("," ,";") + ";";
console.log(cssString);

// Convert camel case to hyphen
cssString = cssString.replace("backgroundColor", "background-color");
console.log(cssString);

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    var html = `
      <div style=${cssString}>
        <p>Some dummy content</p>
      </div>
    `;
    document.getElementById(el).innerHTML = html;
  }
}

let tc = new TestComponent("test");

<div id="test"></div>

Answer 3

我做了一个简单的genCSS函数，该函数将javascript对象中的CSS转换为CSS字符串，并将生成的CSS应用于样式标签。

const genCSS = (style) => {
  let result = '';
  for (props in style) {
     let keyValuePair = `${props}:${style[props]};`;
     result += keyValuePair;
   }
   return result;
};

const styles = {
  background: '#2196f3',
  color: 'white',
  padding: '5px 10px'
};

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

  render(el) {
    const genStyle = genCSS(styles);

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

const test = new TestComponent('root');

适用于原始Javascript类的JS中的CSS

3 个答案: