0
点赞
收藏
分享

微信扫一扫

MySQL秘密武器:索引与事务

海牙秋天 2024-11-06 阅读 13

1.❤️❤️前言~🥳🎉🎉🎉

2.Dom简介 

3.获取元素 

4.事件基础 

5.innerText和innerhtml 

 6.修改元素属性

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            /* 颜色改变 */
            background-color: #ffcc00;
            border-color: #e6b800;
            /* 字体大小由 默认 变为 24px */
            font-size: 24px;
            /* 旋转样式 */
            transform: rotate(20deg);
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
        }
        
        button {
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="myBox" class="box">盒子模型元素</div>
    <br>
    <button id="changeButton">修改 style 属性</button>

    <script>
        // JavaScript 脚本
        // 获取按钮元素
        var changeButton = document.getElementById('changeButton');

        // 添加点击事件监听器
        changeButton.addEventListener('click', function() {
            var box = document.getElementById('myBox');

            // 切换类名以改变样式
            box.className = "box2";
        });
    </script>
</body>

</html>

 

举报

相关推荐

0 条评论