JavaScript动态创建div层及弹窗示例

"使用JavaScript创建div层" 在网页开发中，JavaScript经常被用来动态地创建和操作DOM元素，其中创建div层是常见的需求。div（division）是HTML中的一种块级元素，通常用于布局和组织页面内容。下面将详细介绍如何使用JavaScript来创建div层，并提供相关知识扩展。 1. 创建div元素 在JavaScript中，可以使用`document.createElement()`方法来创建新的HTML元素。例如，要创建一个div元素，代码如下： ```javascript var newDiv = document.createElement('div'); ``` 这将在内存中创建一个新的div元素，但该元素还没有添加到DOM树中。 2. 设置div属性 创建的div元素可以通过`setAttribute()`方法设置属性，例如设置id、class、样式等。例如，设置div的id为"myDiv"，背景色为红色： ```javascript newDiv.setAttribute('id', 'myDiv'); newDiv.style.backgroundColor = 'red'; ``` 3. 添加内容 可以使用`innerHTML`或`appendChild()`来向div中添加文本或子元素。例如，添加文本内容： ```javascript newDiv.innerHTML = '这是div的内容'; ``` 或者添加其他HTML元素： ```javascript var newText = document.createElement('span'); newText.textContent = '这是span元素'; newDiv.appendChild(newText); ``` 4. 插入到文档 最后，需要将这个div元素插入到DOM树中的某个位置。通常会使用`appendChild()`或`insertBefore()`方法。例如，将其添加到body的末尾： ```javascript document.body.appendChild(newDiv); ``` 或者插入到某个已有元素之后： ```javascript var existingElement = document.getElementById('someExistingElement'); existingElement.parentNode.insertBefore(newDiv, existingElement.nextSibling); ``` 5. CSS样式 在示例代码中，可以看到CSS被用于设置页面的整体样式，包括重置默认的margin和padding，以及定义了一个按钮的点击事件。在实际应用中，可以将CSS写入`<style>`标签内，或链接外部样式表文件。 6. 动态调整大小 在提供的代码中，有计算屏幕宽度和高度的变量`sWidth`和`sHeight`，这些可以用于动态设置div的宽高，使其适应窗口大小。例如： ```javascript newDiv.style.width = sWidth + 'px'; newDiv.style.height = sHeight + 'px'; ``` 7. 透明度和滤镜 在注释掉的代码中提到了设置div的透明度，这在旧版本的IE浏览器中可以通过滤镜实现。对于现代浏览器，可以使用CSS3的`opacity`属性。例如： ```javascript newDiv.style.opacity = 0.6; ``` 8. 事件处理 `onClick`属性用于定义点击事件的处理函数。在这个例子中，点击按钮会弹出对话框显示消息。函数`sAlert()`定义了一个简单的提示框，可以根据需要进行扩展。 总结，JavaScript创建div层涉及的主要知识点包括：`createElement()`，`setAttribute()`，`innerHTML`，`appendChild()`，CSS样式，动态计算尺寸，以及事件处理。理解并熟练运用这些技术，可以灵活地在网页中添加、操作和布局元素。