这是我经常最终编写的代码类型:
const element = document.createElement('div');
element.id = 'element';
element.style.position = 'absolute';
element.style.width = '100%';
element.style.height = '100%';
element.style.left = '0';
element.style.top = '0';
element.style.zIndex = '10000';
Here's a very similar question in C#.您将如何在JavaScript中实现它?
itemView.Question
.AnswersJSON(itemView.Answer.ToJSONString())
.Modified(DateTime.Now)
.ModifiedBy(User.Identity.Name);
所以看起来更像这样:
element.id = 'element';
.style.position = 'absolute';
.style.width = '100%';
.style.height = '100%';
.style.left = '0';
.style.top = '0';
.style.zIndex = '10000';
这种解决方案是使代码更短的唯一可行方法吗?:
const element = document.createElement('div');
const e = element;
e.id = 'element';
e.style.position = 'absolute';
e.style.width = '100%';
e.style.height = '100%';
e.style.left = '0';
e.style.top = '0';
e.style.zIndex = '10000';
最佳答案
DOM元素上没有可链接的setter方法,而且它们实际上也不会短很多。但是不要每次都重复element.style
访问!写就好了
const element = document.createElement('div');
element.id = 'element';
const style = element.style;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
style.left = '0';
style.top = '0';
style.zIndex = '10000';
如果您不想拼写出那么多属性分配,也可以使用
Object.assign
:const element = document.createElement('div');
element.id = 'element';
Object.assign(element.style, {
position: 'absolute',
width: '100%',
height: '100%',
left: '0',
top: '0',
zIndex: '10000',
});
最后但并非最不重要的一点是,您可以直接将CSS字符串直接分配给
style
property(但请注意,对于已经存在的元素,通常认为这是一种不好的做法):const element = document.createElement('div');
element.id = 'element';
element.style = 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;';
甚至
const element = Object.assign(document.createElement('div'), {
id: 'element',
style: 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;',
});