前端全栈学习第十四天-js-WebAPI-第二天

最新推荐文章于 2025-04-11 01:39:39 发布
原创最新推荐文章于 2025-04-11 01:39:39 发布 · 171 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#js
前端学习笔记专栏收录该内容
45 篇文章
订阅专栏
本文详细介绍了前端开发中元素样式的操作案例，包括小图大图切换、美女相册展示、列表各行变色等技巧，同时讲解了如何通过name属性获取表单元素值，以及如何封装innerText和textContent实现跨浏览器兼容性。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
1：元素的样式操作案例
2：innerText和innerContent兼容代码
3：自定义属性
1：元素的样式操作案例
案例1：小图大图的切换
思路：大图放在a链接里面，是看不到的,里面再包一个img小图
当你点击小图的时候，其实就是在点大图的链接，然后把大图的href赋值给指定的图片，如果不想丢掉当前页面，可以组织超链接默认跳转，return  false
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="../../images/1.jpg" id="ak"><img src="../../images/1-small.jpg" alt=""/></a>
<img src="" alt="" id="big"/>
<script src="../../common.js"></script>
<script>
    my$("ak").onclick = function () { //看到的是小图，但是大图是链接，看不到，当你一点及的时候就会跳转，也就是会变成大图，这时候赋值给新的ing来接收
        my$("big").src = this.href;
//        return false; //阻止跳转
    }
</script>
</body>
</html>
案例2：美女相册
思路：思路和点一张图片跳到另一个图片一样，只不过注意一点
Src是图片的默认属性，所以赋值的时候不用style；
Return false 阻止超链接默认跳转


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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>
<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>
    var a = my$("imagegallery").getElementsByTagName("a");
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function () {
            my$("image").src = this.href; //这里是image的默认属性，所以不用style
            my$("des").innerHTML = this.title;
            return false;
        }
    }

</script>

</body>
</html>
3：列表各行变色
用的原理是先获取所有的列表，然后for循环 简单点三木运算，复杂点if判断
//        list[i].style.backgroundColor = i%2==0?"pink":"yellow";

4：通过name获取元素的值(多使用与表单中)
var inputObjs = document.getElementsByName("name1");
5:模拟搜索框：主要还是value是默认值，所以不用style
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$永远的24k纯帅$</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="../../common.js"></script>
<script>
    my$("txt").onfocus = function () {
        if (this.value == "请输入搜索内容") {
            this.value = "";
            this.style.color = "black";
        }
    }
    my$("txt").onblur = function () {
//        if (this.value == "") {
//            this.value = "请输入搜索内容";
//            this.style.color = "gray";
//        } 判断数字比判段字符串快
        if (this.value.length == 0) {
            this.value = "请输入搜索内容";
            this.style.color = "gray";
        }
    }


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

6：封装innerText和textContent -----重点，都是设置标签中文本内容
InnerText：谷歌，火狐支持，ie8不支持
TextContent：谷歌，ie8支持，火狐不支持
注意的是封装完方法以后，该怎么调用
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #dv{
            width: 200px;
            height: 200px;
            border: 1px solid #000;;
        }
    </style>
</head>
<body>
<input type="button" value="点我" id="bt"/>
<div id="dv">哈哈哈哈哈哈哈哈</div>
<script src="../../common.js"></script>
<script>
//设置标签中的文本内容,使用innerText属性，谷歌，火狐，ie8都支持
//    innerContent属性，谷歌，火狐支持，ie8不支持
//    兼容代码
//    设置任意的标签中的文本内容
function setInnerText(element,text){
if(typeof element.textContent == "undefined"){
element.innerText =text;
}
    else{
    element.textContent =text;
}
}
//    获取标签中的文本内容
    function getInnerText(element){
        if(typeof  element.textContent =="undefined"){
            return element.innerText;
        }
        else{
            return element.textContent;
        }
    }
    my$("bt").onclick =function(){
        console.log(getInnerText(my$("dv")))
        setInnerText(my$("dv"),"安抚")
    }
</script>
</body>
</html>

7：自定义属性
setAttribute(name,value)  getAttribute(name);
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--<input type="button" value="点我" id="bt"/>-->
<ul>
    <li>打击假货</li>
    <li>打击假货</li>
    <li>打击假货</li>
    <li>打击假货</li>
    <li>打击假货</li>
</ul>
<script src="../../common.js"></script>
<script>
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        list[i].setAttribute("score", (i + 1) * 10);
        list[i].onclick = function () {
            console.log("哈哈");
            alert(this.getAttribute("score"));
        }
    }
    //    移除自定义属性
    //    list[i].removeAttribute()
    //    list[i].className =""
</script>
</body>
</html>

8:table切换
关键是怎么将上面的索引和下面的索引一一对应，并且点击上面的，下面也会切换。排他效果
在循环的时候，就将索引存储起来。然后在需要的时候读取
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }

        .hd {
            height: 45px;
        }

        .hd span {
            display: inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        .hd span.current {
            background-color: purple;
        }

        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
        }

        .bd li.current {
            display: block;
        }
    </style>

</head>
<body>
<div class="box" id="box">
    <div class="hd">
        <span class="current">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="bd">
        <ul>
            <li class="current">我是体育模块</li>
            <li>我是娱乐模块</li>
            <li>我是新闻模块</li>
            <li>我是综 合模块</li>
        </ul>
    </div>
</div>
<script src="../../common.js"></script>
<script>

    //    先把该获取的获取了
    var dv = my$("box");
    var hd = dv.children[0];
    var spanObj = hd.getElementsByTagName("span");
    var bd = dv.children[1];
    var list = bd.getElementsByTagName("li");
    for (var i = 0; i < spanObj.length; i++) {
//    存储索引值
        var num = spanObj[i].setAttribute("index", i);
        spanObj[i].onclick = function () {
            for (var j = 0; j < spanObj.length; j++) {
                spanObj[j].className = "";
            }
            this.className = "current";
            var num = this.getAttribute("index");
            for (var k = 0; k < list.length; k++) {
                list[k].className = "";
            }
            list[num].className = "current";
        }
    }


</script>


<!--//    //获取最外面的div-->
<!--//    var dv = my$("box");-->
<!--//    var bd = dv.children[1];-->
<!--//    //    获取所有的li-->
<!--//    var list = bd.getElementsByTagName("li");-->
<!--//    console.log(list);-->
<!--//    //    获取hd ,排他功能-->
<!--//    var span = document.getElementsByTagName("span");-->
<!--//    for (var i = 0; i < span.length; i++) {-->
<!--////        在点击之前就把索引保存在span标签里面-->
<!--//        span[i].setAttribute("index", i);-->
<!--//        span[i].onclick = function () {-->
<!--////    点击的时候，先清除所有有原来的样式，-->
<!--//            for (var j = 0; j < span.length; j++) {-->
<!--//                span[j].className = "";-->
<!--//-->
<!--//            }-->
<!--//            this.className = "current";-->
<!--////            span被点击的时候获取存储的索引的值-->
<!--//            var num = this.getAttribute("index");-->
<!--////            获取所有的li标签，先把所有的li标签隐藏-->
<!--//            for (var k = 0; k < list.length; k++) {-->
<!--//                list[k].className = "";-->
<!--//            }-->
<!--//            list[num].className = "current";-->
<!--//        }-->
<!--//    }-->


</body>
</html>