JS:通过object.value向div添加样式不会产生任何结果

Question

let styles1 = {
margin1: '50px',
borderRadius1: '20px',
borderStyle1: 'solid',
borderWidth1: '10px',
borderColor1: '#81ecec'
}
let elem = document.createElement('div');
elem.style.margin = styles1.margin1.value + 'px';
elem.style.borderRadius = styles1.borderRadius1.value + 'px';
elem.style.borderStyle = styles1.borderStyle1.value;
elem.style.borderWidth = styles1.borderWidth1.value + 'px';
elem.style.borderColor = styles1.borderColor1.value;
document.body.appendChild(elem);

代码的另一部分(未提及(工作得很好，但由于某种原因，没有一个边框样式工作(并且没有任何错误？(。有人有什么想法吗？

Answer 1

您的代码中出现了一些错误。当引用像styles1.margin1这样的对象中的键时，它已经返回"50px"。因此不需要添加.value。这意味着您不需要在每个样式分配的末尾附加"px"。这应该会奏效：

let elem = document.createElement('div');
elem.style.margin = styles1.margin1;
elem.style.borderRadius = styles1.borderRadius1;
elem.style.borderStyle = styles1.borderStyle1;
elem.style.borderWidth = styles1.borderWidth1;
elem.style.borderColor = styles1.borderColor1;
document.body.appendChild(elem);