DOM的基本操作(五)

最新推荐文章于 2023-08-01 10:47:36 发布

杏黄的三叶草

最新推荐文章于 2023-08-01 10:47:36 发布

阅读量116

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104234864

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

先引入一个js文件

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

<!--1.点击按钮禁用文本款-->
<input type="button" value="按钮" id="btn">
<input type="text" value="文本" id="text">
<script>
    my$("btn").onclick=function () {
        my$("text").disabled=true;
    };
</script>

<!--2.点击按钮修改列表背景颜色-->
<input type="button" value="按钮" id="btn1">
<ul id="ll">
    <li>安河桥</li>
    <li>斑马斑马</li>
    <li>董小姐</li>
</ul>
<script>
    my$("btn1").onclick=function () {
        var list=my$("ll").getElementsByTagName("li");
        for(var i=0;i<list.length;i++){
            list[i].style.backgroundColor="#ccc";
        }
    };
</script>

<!--3.阻止超链接跳转-->
<a href="http://www.baidu.com" id="link">百度</a>
<script>
    //阻止超链接的默认的跳转:return false
    my$("link").onclick=function () {
        alert("可惜让你快乐的人并不是我");
        return false;
    };
</script>

<!--4.点击小图，切换大图-->
<a href="../image/1.gif" id="link">
    <img src="../image/2.gif" id="im">
</a>
<script>
    my$("link").onclick=function () {
        my$("im").src=this.href;
        return false;//阻止超链接跳转
    };
</script>

<!--4.点美女相册-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {

            list-style: none;
        }
        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }
        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
</head>
<body>
<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>

<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>
    //点击a标签,把a标签中的href的属性值给id为image的src属性
    //把a的title属性的值给id为des的p标签赋值

    //从ul中标签获取获取所有的a标签
    var aObjs=my$("imagegallery").getElementsByTagName("a");
    //循环遍历所有的a标签
    for(var i=0;i<aObjs.length;i++){
        //为每个a标签注册点击事件
        aObjs[i].onclick=function () {
            //为id为image的标签的src赋值
            my$("image").src=this.href;
            //为p标签赋值
            my$("des").innerText=this.title;
            //阻止超链接默认的跳转
            return false;
        };
    }
</script>
</body>
</html>

<!--5.隔行变色-->
<input type="button" value="按钮" id="btn">
<ul id="ll">
    <li>安河桥</li>
    <li>斑马斑马</li>
    <li>董小姐</li>
    <li>当我唱起这首歌</li>
    <li>愿得一人心</li>
    <li>老男孩</li>
</ul>
<script>
 my$("btn").onclick=function () {
     var list=my$("ll").getElementsByTagName("li");
     for(var i=0;i<list.length;i++){
         if(i%2==0){
             list[i].style.backgroundColor="red";
         }else{
             list[i].style.backgroundColor="yellow";
         }
     }
 };
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ll{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul li{
            cursor:pointer;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
<!--6.列表的高亮显示(鼠标悬停时的效果)-->
<ul id="ll">
    <li>安河桥</li>
    <li>斑马斑马</li>
    <li>董小姐</li>
    <li>当我唱起这首歌</li>
    <li>愿得一人心</li>
    <li>老男孩</li>
</ul>
<script>
    //鼠标进入和鼠标离开两个事件
    //获取所有的li标签
    var list=my$("ll").getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        //为li注册鼠标进入事件
        list[i].onmouseover=function () {
            this.style.backgroundColor="red";
        };
        //为li注册鼠标离开事件
        list[i].onmouseout=function () {
            //恢复到这个标签默认的颜色
            this.style.backgroundColor="";
        };
    }
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的基本操作(五)

先引入一个js文件/** * 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {HTMLElement} 元素对象 */function my$(id) { return document.getElementById(id);}<input ty...
复制链接

扫一扫

专栏目录