JavaScript初探三

最新推荐文章于 2024-09-12 23:28:34 发布

可芭乐

最新推荐文章于 2024-09-12 23:28:34 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/a839371666/article/details/54429530

JavaScript基础专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用JavaScript来控制网页元素的样式变化，并通过实例展示了按钮点击事件触发的样式改变效果。此外，还提供了全选、反选、不选等功能的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提取行间事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 200px;
        border: 1px solid #999;
    }
    .box {
        background: red;
    }
</style>
<script type="text/javascript">
//1、在JavaScript中加样式，在行间
//2、在JavaScript中取样式，在行间
    function toRed(){
        var oDiv = document.getElementById('div1');
        oDiv.className = 'box';
    }
    function toGreen(){
        var oDiv = document.getElementById('div1');
        oDiv.style.background = 'green';
    }
</script>
</head>
<body>
    <input type="button" value="变红" onclick="toRed()"; />
    <input type="button" value="变绿" onclick="toGreen()"; />
    <div id="div1"></div>
</body>
</html>

利用JavaScript加样式都是加在行间
以上代码能从变红到变绿，但不能先变绿再变红。
优先级：*<标签<class<ID<行间

function 名字(){
……
}
oBtn.onclick =名字

oBtn.onclick = function (){
……
}
两种表现形式相同

window.οnlοad=function(){
……
}
等页面加载完成
在JavaScript中对样式进行修改，一次只能对一个标签进行修改

全选、反选、不选的表达

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function (){
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oBtn3 = document.getElementById('btn3');
        var oDiv = document.getElementById('div1');
        var aCh = oDiv.getElementsByTagName('input');

        oBtn1.onclick = function(){
            for(var i = 0; i < aCh.length; i++){
                aCh[i].checked = true;
            }
        }

        oBtn2.onclick = function(){
            for(var i = 0; i < aCh.length; i++){
                aCh[i].checked = false;
            }
        }

        oBtn3.onclick = function(){
            for(var i = 0; i < aCh.length; i++){
                if (aCh[i].checked == true) {
                    aCh[i].checked = false;
                }
                else{
                    aCh[i].checked = true;
                }
            }
        }
    }
</script>
</head>
<body>
    <input id="btn1" type="button" value="全选" /><br>
    <input id="btn2" type="button" value="不选" /><br>
    <input id="btn3" type="button" value="反选" /><br>
    <div id="div1">
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
    </div>
</body>
</html>