一个按钮实现样式的自由切换/JS五

77 阅读 0 评论 51 点赞

我是靠谱客的博主开朗指甲油，最近开发中收集的这篇文章主要介绍一个按钮实现样式的自由切换/JS五，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

两个按钮控制元素属性改变

未点击按钮时的效果如下：

点击加上按钮时的效果如下：

点击去掉样式时结果如下

注：获取元素的关键代码为

var btn1=my$('button:first-of-type') 获取第一个button
var btn2=my$('button:nth-of-type(2)') 获取第二个button

my$('.box').className='box' 更改元素类名，根据类名会更改元素的属性

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            opacity: 0.6;
        }
        /*写一个样式*/
        .cloth{
            width: 200px;
            height: 200px;
            background-color: #666666;
            border-radius: 50%;
            margin-left: 50px;
        }
        /*对象.className='cloth'  上面的样式添加到元素身上b*/
    </style>
</head>
<body>
<!--js如何获取和设置文本外样式-->
<button>加上样式</button>
<button>去掉样式</button>

<div class="box"></div>

<script src="../day9/获取元素.js"></script>
<script>
    var btn1=my$('button:first-of-type')
    var btn2=my$('button:nth-of-type(2)')
    btn1.onclick=getCloth;
    function getCloth() {
        /*给div外部样式添加一件衣服*/
        my$('.box').className='cloth box'
    }
    btn2.onclick=getoffCloth;
    function getoffCloth() {
        my$('.box').className='box'
    }

</script>

</body>
</html>

一个按钮实现元素属性的切换

刚开始效果如下：

点击按钮之后效果如下：

再次点击之后效果如下：

不断点击按钮可以实现以上效果之间的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            opacity: 0.6;
        }
        .cloth{
            width: 200px;
            height: 200px;
            background-color: #666666;
            border-radius: 50%;
            margin-left: 50px;
        }
        .cloth1{
            width: 200px;
            height: 200px;
            background-color: #9a6e3a;
            border-radius: 50%;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<button>显示灰色</button>
<div class="box"></div>

<script src="../day9/获取元素.js"></script>
<script>
    var btn1=my$('button:first-of-type') //获取第一个button
    var flag=true  //设置一个标志，通过他来判断执行什么操作
    btn1.onclick=function getCloth() {
        if (flag) {
            my$('.box').className = 'cloth box'
            btn1.innerText='显示黄色'
        }else{
            my$('.box').className = 'cloth1 box'
            btn1.innerText = '显示灰色'
        }
        flag=!flag  //切换标志的值以便下次判断时执行另一个操作
    }
</script>
</body>
</html>