js改变底部边框

在JavaScript中改变一个元素的底部边框，可以通过修改该元素的style属性来实现。以下是一些基础概念和示例代码：

基础概念

DOM操作：JavaScript可以通过DOM（文档对象模型）来访问和修改HTML元素。
CSS样式：通过JavaScript可以直接修改元素的CSS样式。

示例代码

假设你有一个HTML元素，其ID为myElement，你可以使用以下JavaScript代码来改变它的底部边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Bottom Border</title>
    <style>
        #myElement {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="myElement"></div>
    <button onclick="changeBottomBorder()">Change Bottom Border</button>

    <script>
        function changeBottomBorder() {
            var element = document.getElementById('myElement');
            // 设置底部边框为2px实线红色边框
            element.style.borderBottom = '2px solid red';
        }
    </script>
</body>
</html>

解释

HTML部分：定义了一个div元素，ID为myElement，和一个按钮。
CSS部分：设置了myElement的初始样式。
JavaScript部分：
- document.getElementById('myElement')：获取ID为myElement的元素。
- element.style.borderBottom = '2px solid red'：设置该元素的底部边框为2像素宽的红色实线边框。