Question

这是我经常最终编写的代码类型：

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';

Answer 1

在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;',
});

Answer 2

您可以使用对象语法并封装样式

a .hover-img {
    position:relative;
}
a .hover-img span {
    position:absolute; left:-9999px; top:-9999px; z-index:9999;
    border: 2px solid #000;

}
a:hover .hover-img span {
    top: 40px;
    left: 0;
}
.dotted {
    color: #4e555b;
    border-bottom: 2px dashed #4e555b;
    text-decoration: none!important;
}
.dotted:hover {
    text-decoration: none!important;
}

然后，您可以执行以下操作，例如将此对象用作基本样式对象，并使用es6语法（例如）替换值。

const style1 = {
   position: 'absolute',
   width: '100%',
   height: '100%',
   left: '0',
   top:'0',
   zIndex: '10000'
}

element.id = 'element';
element.style = style1;

Document API不允许以您建议的方式进行链接，如果您的目标是减少代码行数，则上述解决方案将允许这样做，并使您的代码可重用和可扩展；

https://developer.mozilla.org/en-US/docs/Web/API/Document

如何缩短对JavaScript中同一对象的多个属性的访问？

2 个答案: