先引入一个JavaScript文件

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {HTMLElement} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}

<!--1.点击按钮选择菜单-->
<input type="button" value="选择" id="select">
<select>
    <option>1</option>
    <option id="one">2</option>
    <option>3</option>
    <option id="two">4</option>
    <option>5</option>
</select>
<script>
    my$("select").onclick=function () {
        my$("one").selected=true;
    }
</script>

<!--2.点击按钮,修改div的宽,高,背景颜色-->
<input type="button" value="按钮" id="btn">
<div id="div"></div>
<script>
    //凡是css中的属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
    my$("btn").onclick=function () {
        my$("div").style.width="200px";
        my$("div").style.height="200px";
        my$("div").style.backgroundColor="red";

    };
</script>

<!--3.点击按钮，设置div隐藏-->
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn1">
<div id="div" style="width: 200px;height: 200px;background-color:red;"></div>
<script>
    my$("btn").onclick=function () {
      my$("div").style.display="none";
    };
    my$("btn1").onclick=function () {
        my$("div").style.display="block";
    };
</script>

<!--4.点击按钮，设置显示和隐藏-->
<input type="button" value="隐藏" id="btn">
<div id="div" style="width: 200px;height: 200px;background-color:red;"></div>
<script>
    my$("btn").onclick=function () {
        if(this.value=="隐藏"){
            my$("div").style.display="none";
            this.value="显示";
        }else if(this.value=="显示"){
            my$("div").style.display="block";
            this.value="隐藏";
        }
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color:black;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
<input type="button" value="开/关灯" id="my">
<script>
    my$("my").onclick=function () {
        document.body.className=document.body.className!="cls"?"cls":"";
    };

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common.js"></script>
    <style>
        .cls{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /*第二题的样式*/
        /*div{*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    background-color: red;*/
        /*}*/
        .box{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="显示" id="btn">
<div id="div" class="cls"></div>
<!--1.用类样式设置div的属性-->
<!--<script>-->
<!--    my$("btn").onclick=function () {-->
<!--        //在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用className-->
<!--        my$("div").className="cls";-->
<!--        my$("div").style.border="10px solid blue";-->
<!--    }-->
<!--</script>-->

<!--2.用按钮控制盒子的显示-->
<script>
    my$("btn").onclick=function () {
        //判断的是div是否应用了类样式
        if(my$("div").className!="box"){
            my$("div").className="box";
            this.value="显示";
        }else{
            //隐藏的状态----立刻显示
            my$("div").className="";
            this.value="隐藏";
        }
    };
</script>
</body>
</html>

来源：CSDN

作者：九层之台始于垒土

链接：https://blog.csdn.net/dwjdj/article/details/104228668

标签

按钮

DOM的基本操作(四)

先引入一个JavaScript文件