js实现：点击为盒子添加样式。边框和整体样式。

最新推荐文章于 2024-05-14 09:35:57 发布

陌巷偷客

最新推荐文章于 2024-05-14 09:35:57 发布

阅读量2.9k

点赞数

分类专栏： js基础入门练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_53881313/article/details/124019418

版权

js基础入门练习专栏收录该内容

23 篇文章 5 订阅

订阅专栏

用 js 给 html 添加 css 样式。

1.添加边框样式。

通过点击盒子次数添加样式和取消样式。

样式和html内容：写到上面。

<style>
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto 0;
            font-size: 24px;
            border: 4px solid transparent;
            background-color: #eee;
            transition: all .3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
       
    </style>
</head>
<body>
    <div class="box" id="box">我是盒子</div>
 <script>
        var _box = document.getElementById('box');
            var isShowBorder = false;
            _box.onclick = function () {
                if (isShowBorder) {
                    _box.style.border = 'none';
                    isShowBorder = false;
                } else {
                    _box.style.border = '2px solid #f00';
                    isShowBorder = true;
                }
            }
    </script>
    
</body>

进一步优化一下：这样甚至可以添加很多各种样式，也不用写 .style 繁琐

代码：js写在里面。

原理：通过给盒子div 添加一个类名，在css上写具体样式，类名的添加和取消，控制样式的展现与否，达成目标。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto 0;
            font-size: 24px;
            border: 4px solid transparent;
            background-color: #eee;
            transition: all .3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box-border {
            font-size: 32px;
            border-color: #f00;
        }
    
       
    </style>
</head>
<body>
    <div class="box" id="box" onclick="changeBorder()">我是盒子</div>
    <script>
       function changeBorder() {
            var _box = document.getElementById('box');
            var _box_class = _box.getAttribute('class');
            if (_box_class == 'box') {
                _box.setAttribute('class', 'box box-border');
            } else {
                _box.setAttribute('class', 'box');
            }
        }

    </script>
    
</body>
</html>