HTML div id|极客教程

HTML div id

在HTML中，<div>是一个最常用的标签，用来表示文档中的一个独立块。为了让<div>更有针对性和易于操作，可以给每个<div>添加一个唯一的id属性。这样可以在CSS样式表中直接通过id选择器来操作这个<div>，实现样式的定制化。

创建带有id属性的div

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Div with ID</title>
</head>
<body>
    <div id="section1">This is section 1</div>
    <div id="section2">This is section 2</div>
</body>
</html>

Output:

HTML div id

在上面的示例中，我们创建了两个带有id属性的<div>，分别是id为”section1″和”section2″。

使用id选择器样式化div

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #section1 {
            background-color: lightblue;
            color: white;
            padding: 10px;
        }
        #section2 {
            background-color: lightgreen;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="section1">This is section 1</div>
    <div id="section2">This is section 2</div>
</body>
</html>

Output:

HTML div id

在上面的示例中，我们使用id选择器来对不同的<div>进行样式化。

使用id来操作div元素

示例代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function changeText() {
            document.getElementById("section1").innerHTML = "Changed text for section 1";
        }
    </script>
</head>
<body>
    <div id="section1">Original text for section 1</div>
    <button onclick="changeText()">Change Text</button>
</body>
</html>

Output:

HTML div id

在上面的示例中，当点击按钮时，会通过id来获取<div>元素，并修改其内容。

使用id来隐藏和显示div元素

示例代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function toggleVisibility() {
            var section2 = document.getElementById("section2");
            if (section2.style.display === "none") {
                section2.style.display = "block";
            } else {
                section2.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <div id="section1">This is section 1</div>
    <div id="section2" style="display: none;">This is section 2</div>
    <button onclick="toggleVisibility()">Toggle Visibility</button>
</body>
</html>

Output:

HTML div id

在上面的示例中，当点击按钮时，会通过id来获取<div>元素，并根据其当前的display属性值来隐藏或显示该元素。

使用id来绑定事件

示例代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function showMessage() {
            alert("Hello from section 1!");
        }
        document.getElementById("section1").addEventListener("click", showMessage);
    </script>
</head>
<body>
    <div id="section1">Click me</div>
</body>
</html>

Output:

HTML div id