js div

作者：菠蘿。d海发布日期:2025-04-10 浏览:58

<!DOCTYPE html>
<html>
<head>
    <title>JS Div Example</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>

<div id="myDiv">Hello, I'm a div!</div>

<script>
    // 获取页面中的 div 元素
    var divElement = document.getElementById("myDiv");

    // 修改 div 的内容
    function changeContent() {
        divElement.innerHTML = "Content has been changed!";
    }

    // 修改 div 的样式
    function changeStyle() {
        divElement.style.backgroundColor = "lightgreen";
        divElement.style.color = "white";
    }

    // 在页面加载完成后执行一些操作
    window.onload = function() {
        setTimeout(changeContent, 2000);  // 2秒后改变内容
        setTimeout(changeStyle, 4000);    // 4秒后改变样式
    };
</script>

</body>
</html>

解释说明：

HTML部分：定义了一个 div 元素，初始内容为 "Hello, I'm a div!"，并设置了 ID 为 myDiv。
CSS部分：通过 CSS 设置了 div 的宽度、高度、背景颜色和文本对齐方式等样式。
JavaScript部分：
- 使用 document.getElementById 获取页面中的 div 元素。
- 定义了两个函数 changeContent 和 changeStyle 分别用于修改 div 的内容和样式。
- 使用 window.onload 确保页面加载完成后执行某些操作。这里使用了 setTimeout 来延迟执行 changeContent 和 changeStyle 函数，模拟动态效果。

上一篇：js flex

下一篇：js 获取div宽度