[TypeScript]在TypeScript代码中生成html元素并给它们设置多种样式

背景

这次的任务是在three.js的三维场景中动态嵌入一个二维信息框，里面有一些内容，按照下面的形式排列，表格的框线可以去掉。

Column 1	Column 2
key1	value1
key2	value2

这自然要用CSS3DObject或CSS2DObject包裹html元素来实现，最后根据场景需求选定CSS3DObject来实现。因为是根据场景动态生成该html元素，所以html元素通过typescript代码来生成，即

let div = document.createElement('div');

但是要指定其中的样式，有以下几种方式

在typescript代码中指定html元素的样式

设置某一个单独的样式可以通过style

div.style.textAlign = 'center';
div.style.backfaceVisibility = 'hidden';

设置多个样式可以通过setAttribute

let itemDiv = document.createElement('div');
itemDiv.setAttribute(
    'style',
    `display: flex;
    align-items: center;`
);

对于设置多个样式，比较奇怪的一点是，我对生成的html元素设置了类名称，然后想在<style里对该类名选择器设置样式属性，可是不生效，不知道为什么，希望能有大佬解惑。

参考

参考1
参考2