使用 Javascript 创建多个具有特定类名和 css 样式代码的 'div 标签

Question

这就是我想出的......

document.body.onload = function addElement() {
// create a new div element
let newDiv = document.createElement('div');
newDiv.className = 'carrierBG';
newDiv.style.backgroundColor = '#03b7ff';
newDiv.style.width = '400px';
newDiv.style.height = '400px';
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById('div');
document.body.insertBefore(newDiv, currentDiv);
};

它在我的 HTML 文件中创建一个div 标签...

<div class="carrierBG" style="background-color: rgb(3, 183, 255); width: 400px; height: 400px;"></div>

我如何复制它，以便所有代码都在同一个 javascript 文件中，并且我可以创建具有不同类名和 css 样式代码的其他"div"标签？

Answer 1

可以将匿名函数分配为事件侦听器onload。在此功能中，您可以执行任何操作。例如。

// declare function first
function addElement(){...}
document.body.onload = () => new Array(100).fill(true).forEach(addElement)
// or use use anonymous function
document.body.onload = () => new Array(100).fill(true).forEach(() => {
// code to add elements here
})

我初始化一个大小为 100 的新数组并用位填充它。然后我为每个项目调用addElement函数(100 次(。

Answer 2

你几乎可以使用addElement函数，因为它可以做你想做的一切，但以硬编码的方式。该解决方案的要点是，您需要为类名和样式添加参数addElement。

这意味着您的addElement函数最终看起来更像：

function addElement(className, styles) {
const newDiv = document.createElement('div');
newDiv.classList.add(className);
// set your styles here, maybe doing something like
Object.assign(newDiv.style, styles);
}

您需要注意，使用Object.assign需要 IE11 的填充代码，但由于您使用的是let因此您的项目可能已经具有常见的函数，例如填充填充或 IE11 支持无关紧要。如果您的类通过 CSS 处理样式，则很可能更容易长期维护。

最后，不要使用addElement作为onload事件的回调，而是希望将其传递到另一个函数的主体中。

document.body.onload = function handleOnload() {
addElement('className1', { color: 'green' });
addElement('className2', { color: '#000', 'background': 'orange' });
}

Answer 3

您可以使用要添加的参数创建函数：

document.body.onload = function addElement() {
// Add generated elements to the DOM
var body = null;
createAndAdd("div", "blue", body); // Call this once
createAndAdd("div", "red", body);  // Call this twice
createAndAdd("div", "green", body);// Call this thrice
createAndAdd("div", "blue", body); // Call this as many times as a new element is wanted
createAndAdd("div", "red", body);
createAndAdd("div", "green", body);
createAndAdd("div", "blue", body);
createAndAdd("div", "red", body);
createAndAdd("div", "green", body);
};
// Insert an element with a class name before the passed element
function createAndAdd(tag, className, placeBefore) {
let element = createElement(tag, className);
document.body.insertBefore(element, placeBefore);
}
// Return a new element with a certain class
function createElement(tag, className) {
let element = document.createElement(tag);
element.className = className;
return element;
}

div.blue {
background-color: #03b7ff;
width: 400px;
height: 400px;
}
div.red {
background-color: red;
width: 400px;
height: 400px;
}
div.green {
background-color: green;
width: 400px;
height: 400px;
}

我还建议为所需的样式创建一个类，而不是通过 JS 添加它们。

顺便说一下，getElementById('div')在您的情况下返回null(因为页面加载时没有div(，这恰好将项目附加到正文中。这就是我对上面的脚本所做的。

Answer 4

与其将addElement传递给document.body.onload，不如执行以下操作：

function addElement() {
// ...
}
document.body.onload = function () {
addElement(/* first element */);
addElement(/* second element */);
}