JavaScript学习笔记（5.0）

mez_Blog

于 2023-03-12 11:13:28 发布

阅读量132

点赞数 1

分类专栏： HTML5 mez_Blog的专栏 JavaScript 文章标签： javascript 学习前端 html5 开发语言

本文链接：https://blog.csdn.net/mez_Blog/article/details/129472320

版权

mez_Blog的专栏同时被 3 个专栏收录

116 篇文章 6 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

渲染页面示例

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-12 09:12:54
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-12 09:31:57
 * @FilePath: \vscode\渲染页面.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            overflow: hidden;
        }
        li img{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <ul id="movie">
        <li>
            <img src="img/0120.jpg" alt="">
            <h3>标题1</h3>
            <p>文本1</p>
        </li>
    </ul>
    <script>
        var filmlist=[
            {
                url:"img/0120.jpg",
                title:"测试标题1",
                grade:2.3
            },
            {
                url:"img/0121.jpg",
                title:"测试标题2",
                grade:2.5
            },
            {
                url:"img/0123.jpg",
                title:"测试标题3",
                grade:2.9
            }
        ]
        var filmitem=filmlist.map(function(item){
            return `<li>
            <img src="${item.url}" alt="">
            <h3>${item.title}</h3>
            <p>${item.grade}</p>
        </li>`
        })
        // console.log(filmitem.join(""))
        var test=document.querySelector("#movie")
        test.innerHTML=filmitem.join("")
    </script>
</body>
</html>

操作元素样式【行内】（可以进行读写操作）

box.style.height               //只能获取行内样式（style）

//访问行内样式   background-color
box.style["background-color"]
//或
box.style.backgroundColor

对于所有样式的万能方法（但是不能给样式赋值）

getComputedStyle(box) .width          //.backgroundColor   //["background-color"]

该方法不支持IE(6,7,8)低版本浏览器，对应的IE浏览器使用obox.currentStyle.backgroundColor

操作元素类名

.className

//删除类名，直接进行赋值
box.className=""

//增加类名
box.className+=" item3"  //前面必须有空格，否则就会对当前类名的最后一个类名进行拼接

//增加
box.classList.add("item3")

//删除
box.classList.remove("item3") //一个一个删除

//切换  (如果有这个类就删除，没有就增加)
box.classList.toggle("item")

选项卡示例

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-12 10:07:07
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-12 11:03:42
 * @FilePath: \vscode\选项卡.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            /* display: flex; */
            list-style: none;
        }
        li{
            height: 50px;
            line-height: 50px;
            text-align:center ;
            flex: 1;
        }
        
        .header{
            display: flex;
            width: 500px;
        }
        .header li{
            flex:1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        .box{
            position: relative;
        }
        .box li{
            position: absolute;
            left: 0;
            top:0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }
        .header .active{
            background-color: red;
            /* border-bottom: 1px solid red; */
        }
        .box .active{
            display: block;
            /* border-bottom: 1px solid red; */
        }
    </style>
</head>
<body>
    <ul class="header">
        <li class="active" >正在上映</li>
        <li >往期作品</li>
        <li >往期作品</li>
        <li >往期作品</li>
    </ul>
    <ul class="box">
        <li class="active" >正在上映</li>
        <li >往期作品</li>
        <li >往期作品</li>
        <li >往期作品</li>
    </ul>
    <script>
        var oHeaderItems=document.querySelectorAll(".header li")
        var oBoxItems=document.querySelectorAll(".box li")

        for(var i=0; i<oHeaderItems.length; i++){
            //自定义属性
            oHeaderItems[i].dataset.index=i
            oHeaderItems[i].onclick=handler
        }
        function handler(){
                // console.log(111)
                // console.log(this.dataset.index)
                var index=this.dataset.index
                for(var m=0;m<oHeaderItems.length; m++){
                    oHeaderItems[m].classList.remove("active")
                    oBoxItems[m].classList.remove("active")
                }
                oHeaderItems[index].classList.add("active")
                oBoxItems[index].classList.add("active")
            }
        
        
    </script>
</body>
</html>

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记（5.0）

该方法不支持IE(6,7,8)低版本浏览器，对应的IE浏览器使用obox.currentStyle.backgroundColor。对于所有样式的万能方法（但是不能给样式赋值）操作元素样式【行内】（可以进行读写操作）
复制链接

扫一扫