码上快乐

相关内容   简体   繁体

js DOM（一）注册事件、修改标签属性和样式

本文转载自  查看原文  2020-01-12 21:09  734    JS | jquery

目录：

    1.DOM的概念
    2.为元素注册事件
    3.案例：点击按钮显示图片及设置宽高
    4.案例：点击按钮设置p标签的文本内容
    5.案例：点击按钮修改超链接的地址及热点文字
    6.案例: 点击按钮设置多个p标签内容
    7.案例：点击按钮修改图片的alt和title属性
    8.案例: 点击按钮修改多个文本框的值
    9.案例：点击图片修改自身的宽高
    10.案例：按钮的排他功能
    11.案例：点小图边大图
    12.案例：点击按钮选择性别和兴趣
    13.案例：下拉选择框
    14.案例：文本域
    15.案例：点击按钮设置div的样式
    16.案例：点击按钮，显示或隐藏div
    17.案例：通过类样式class设置div样式
    18.案例：通过类样式class设置div显示或隐藏
    19.点击div改变其背景色（随机）

 

1.DOM的概念    <--返回目录
    * JavaScript分三部分
        - ECMAScript标准:JS的基本语法
        - DOM：Document object Model  文档对象模型--操作页面的元素
        - BOM：Browser Object Model 浏览器对象模型--操作的是浏览器
        
    * DOM文档对象模型--操作页面元素
        - 文档document：把一个html文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象
        - 元素element：html页面的每个标签，都是一个元素，每个元素都可以看成一个对象
        - 节点node：页面中所有的内容都是节点，标签，属性，文本
        - 属性

2、为元素注册事件    <--返回目录
    * 事件：就是一件事，有触发、响应、事件源
        按钮被点击，弹出对话框
        按钮-->事件源
        点击-->事件名字
        被点了-->触发了
        弹框了-->响应
        
    * 点击按钮，弹出对话框，代码1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
    <input type="button" value="弹框" onclick="alert('哈哈哈~')"/>
</body>
</html>   

    * 点击按钮，弹出对话框，代码2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn" onclick="fun()"/>
<script type="text/javascript">
    function fun(){
        alert("嘎嘎嘎~");
    }
</script>
</body>
</html>

    * 点击按钮，弹出对话框，代码3：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn"/>
<script type="text/javascript">
    document.getElementById("btn").onclick = function(){
        alert("呵呵呵~");
    };
</script>
</body>
</html>

 

3、案例：点击按钮显示图片及设置宽高    <--返回目录
　　点击按钮显示图片, 点击按钮的时候设置img标签的src属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="" id="imgId"/>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("imgId");
        ele.src="a.jpg";
        ele.width="300";//注意，img标签的width的值300没有单位px
        ele.height="280";
    };
</script>
</body>
</html>

 

 4、案例：点击按钮设置p标签的文本内容    <--返回目录
　　凡是成对的标签，中间的文本内容，设置的时候，都使用innerText属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<p id="pId"></p>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("pId");
        ele.innerText="文本";
    };
</script>
</body>
</html>

 

5、案例：点击按钮修改超链接的地址及热点文字    <--返回目录
　　热点文字：即<a>热点文字</>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<a href="" id="aId"></a>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("aId");
        ele.href="http://www.baidu.com";  //注意http不可以省略
        ele.innerText="百度";
    };
</script>
</body>
</html>

 

6、案例:点击按钮设置多个p标签内容    <--返回目录
　　如何获取某个div里面的所以p标签
        var eles = document.getElementById("div1Id").getElementsByTagName("p");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="div1Id">
    <p>aaaa</p>
    <p>bbbb</p>
    <p>cccc</p>
</div>
<div id="div2Id">
    <p>aaaa</p>
    <p>bbbb</p>
    <p>cccc</p>
</div>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var eles = document.getElementById("div1Id").getElementsByTagName("p");
        for(var i=0;i<eles.length;i++){
            eles[i].innerText="p标签文本";
        }
    };
</script>
</body>
</html>

 

7、案例：点击按钮修改图片的alt和title属性    <--返回目录
　　title:鼠标悬停在图片上时显示的信息
　　alt：图片挂了时显示的信息

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="a.jpg" width="300" height="280" />
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementsByTagName("img")[0];
        ele.alt="图片挂了时的信息";
        ele.title="标题";
    };
</script>
</body>
</html>

 

8、案例:点击按钮修改多个文本框的值    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var eles = document.getElementsByTagName("input");
        for(var i=0;i<eles.length;i++){
            if(eles[i].type=="text"){
                eles[i].value="文本框输入的值";
            }else if(eles[i].type=="button"){
                eles[i].value="我是个按钮";            }
        }
    };
</script>
</body>
</html>

 

9、案例：点击图片修改自身的宽高    <--返回目录
　　对绑定事件的元素自身进行修改，可以使用this

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<img src="a.jpg" width="500px"/>
<script type="text/javascript">
    var ele = document.getElementsByTagName("img")[0];
    ele.onclick=function(){
        this.width="300";//对绑定事件的元素自身进行修改，可以使用this
    };
</script>
</body>
</html>

 

10、案例：按钮的排他功能    <--返回目录
　　需求：3个按钮，按钮的默认value值是没被点，点击按钮，该按钮value值为被点了；
　　点击另外一个按钮，该按钮value值为被点了，其他的value值变成默认值。
　　做两件事：第一、将所有按钮value值设置为"没被点"；第二、将当前点击的按钮的value值设置为"被点了"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<script type="text/javascript">
    var eles = document.getElementsByTagName("input");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            //将所有按钮value值设置为"没被点"
            for(var j=0;j<eles.length;j++){
                eles[j].value="没被点";
                eles[j].style="background-color:#ddd";
            }
            this.value="被点了";//注意：这里this不能用eles[i]，因为为所有按钮注册完事件后i=3了
            this.style="background-color:red";
        };
    }
</script>
</body>
</html>

 

11、案例：点小图变大图    <--返回目录
　　 <a href="a.jpg"><img src="a-small.jpg"></a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<a href="a.jpg" id="aId"><img src="a-small.jpg" id="imgId"></a>
<script type="text/javascript">
    //点击图片标签，设置图片标签的src路径为超链接中大图的路径
    document.getElementById("imgId").onclick=function(){
        this.src=document.getElementById("aId").href;
        //return false;//页面url不变
    };
</script>
</body>
</html>

 

12、案例：点击按钮选择性别和兴趣    <--返回目录
　　document.getElementById().checked=true;  //被选中
　　true可以用"checked"替换，但是浏览器也会把"checked"解析成true

 

13、案例：下拉选择框    <--返回目录
　　document.getElementById().selected=true;  //被选中

 

14、案例：文本域    <--返回目录
    * disabled="disabled"
    * readonly="readonly"
    * document.getElementById().value="哈哈";//推荐使用这种方法，改变文本域内容
    * document.getElementById().innerText="呵呵";//也可以改变文本域内容

15、案例：点击按钮设置div的样式    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
<div id="divId"></div>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        document.getElementById("divId").style.width="200px";
        document.getElementById("divId").style.height="200px";
        //经验：css中background-color在js中写成backgroundColor
        document.getElementById("divId").style.backgroundColor="hotpink";
        //document.getElementById("divId").style="width:200px;height:200px;background-color:green";
    };
</script>
</body>
</html>

 

16、案例：点击按钮，显示或隐藏div    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div id="divId"></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    ele.onclick=function(){
        var divEle = document.getElementById("divId");
        if(this.value=="显示"){
            divEle.style="width:200px;height:200px;background-color:green";
            //divEle.style.display=true;
            divEle.style.display="block";
            this.value="隐藏";
        }else if(this.value=="隐藏"){
            divEle.style.display="none";
            this.value="显示";
        }
    };
</script>
</body>
</html>

 

17、案例：通过类样式class设置div样式    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        .cls1{
            width:200px;
            height: 200px;
            background-color: yellow;
        }
        .cls2{
            width:300px;
            height: 300px;
            background-color: hotpink;
            border:2px solid blue;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" class="cls1"></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    ele.onclick=function(){
        document.getElementById("divId").className="cls2";
    };
</script>
</body>
</html>

 

18、案例：通过类样式class设置div显示或隐藏    <--返回目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            background-color: yellow;
        }
        .cls{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="隐藏" />
<div id="divId" ></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    var divEle = document.getElementById("divId");
    ele.onclick=function(){
        if(divEle.className != "cls"){//div为显示状态
            this.value="显示";
            divEle.className="cls";
        }else{//div为隐藏状态
            this.value="隐藏";
            divEle.className="";
        }
    };
</script>
</body>
</html>

 

19.点击div改变其背景色（随机）    <--返回目录

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style type="text/css">
#box {
    background-color: #342;
    width: 200px;
    height: 200px;
}
</style>
</head>
<body>

    <div id="box"></div>

</body>
<script type="text/javascript">
    function getRandomStr(length) {
        if (!length) length = 1
        const strArray = ['0', '1', '2', '3', '4', '5', '6' ,'7' ,'8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        let str = ''
        for (let i = 0; i < length; i++) {
            str += strArray[parseInt(Math.random() * 16)]
        }
        return str
    }

    function randomColor(ele) {
        const color = '#' + getRandomStr(6)
        console.log(`color=${color}`)
        ele.style.backgroundColor = color
    }

    const ele = document.getElementById('box')
    ele.onclick = function() {
        randomColor(this)
    }
</script>
</html>

---


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 js更改标签属性，样式。。事件 for循环 JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型 a 标签中 title 属性样式修改 js改变标签属性与js事件 JS操作标签的值、属性、样式。 js 重写a标签的href属性和onclick事件 js DOM 节点树 设置 style 样式属性 js中修改标签的hidden属性 关于 HTML JS DOM元素的操作（创建，添加，删除，和修改属性）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM