2023 12.14笔记

最新推荐文章于 2024-07-14 16:43:41 发布

KALAXK

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量55

点赞数

文章标签：前端 javascript html 笔记

本文链接：https://blog.csdn.net/KALAXK/article/details/135036979

版权

1.更改元素属性

元素属性：1、普通属性 2、style样式属性 3、offset属性

普通属性元素对象.属性名= 属性值不在style标签里的就是普通属性

例：

      img src="../../12-12/images/1.jpg" alt="">

      选中  let img = document.querySelector("img")

      更改  img.src = "../../12-12/images/2.jpg"

或：

img.getAttribute("src")
img.setAttribute("title", "你是一个大漂亮")

设置style样式属性

<style>
        .box {
            display: none;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .new {
            display: block;
            width: 1200px;
            height: 300px;
            background-color: greenyellow;
        }
    </style>
<body>

1、元素对象.style.属性名 = "属性值"，而像background-color这类有 - 则用小驼峰命名法 backgroundColor

例子： box.style.width = "500px"

2.先定义一个类名，再给

className 会覆盖掉原来的类名

box.className = "box new"这样就不会把原来的覆盖，而是能够共存

3、classList

box.classList.add("new")	添加一个类
box.classList.remove("box")	削减一个类
box.classList.toggle("box")	有则加，无则减

获取style样式属性的属性值

getComputedStyle(box, false)["backgroundColor"]

getComputedStyle(元素对象, false)["要访问元素对象的属性"]

4.offset属性

只读属性，无法改值。

box.offsetWidth	元素对象本身的宽度
box.offsetHeight	元素对象本身的高度
box.offsetTop	当前元素垂直与父元素的顶端的值
box.offsetLeft	当前元素与父元素的左端的值

5.节点的相关操作

<body>
    <ul>

    </ul>

    <script>
        // 1、创建一个li标签
        let newLi = document.createElement("li")
        // 2、添加内容
        newLi.innerHTML = `<a href="#">我是新添加的li</a>`
        console.log(newLi)
        // 元素的追加   父元素
        let ul = document.querySelector("ul")
        ul.appendChild(newLi)

    </script>

6.查找节点

div class="father">
        父亲
        <div class="son">儿砸1</div>
        <div class="son">儿砸2</div>
        <div class="son2">儿砸3</div>
        <div class="son">儿砸4</div>


    </div>
    <script>
        // 通过父亲获取子节点
        // let f = document.querySelector(".father")
        // console.log(f.children[2])
        // console.log(f.childNodes)获取全部

        // 通过儿子找到父节点
        // let s = document.querySelector(".son")
        // console.log(s.parentNode)


        // 兄弟节点
        let son2 = document.querySelector(".son2")
        console.log(son2.previousElementSibling)获取所选的上一个元素
        console.log(son2.nextElementSibling)获取所选的下一个元素


    </script>

7.inserbefore

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>

    <script>
        let ul = document.querySelector("ul")
        // 创建li
        let newLi = document.createElement("li")
        // 添加内容
        newLi.innerHTML = `新来的`
        // 3、追加  默认加在最后一个
        ul.appendChild(newLi)

        // ul.insertBefore(目标节点,参照节点)
        ul.insertBefore(newLi, ul.children[0])
        //这样就可以加在最前面

    </script>

</body>

8.克隆节点

<body>
    <div class="father">
        xsxs
        <div class="son">erza</div>
    </div>

    <script>
        let newf = document.querySelector(".father")
        newf.cloneNode(true)里面默认的是false即不克隆子节点
    </script>

</body>

9.删除节点

一定是基于父元素进行的

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>

    </ul>

    <script>
        let ul = document.querySelector("ul")
        ul.removeChild(ul.children[1])

    </script>

</body>

10.事件监听

事件源、事件类型、事件对象

 <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>点击</button>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        // 事件源、事件类型、事件对象：触发的一些相关信息
        // 事件监听

        //格式： 事件源.addEventListener("事件类型",处理函数,true|false)
        let btn = document.querySelector("button")
        // btn.addEventListener("click", () => {
        //     alert("666")
        // })
           点击网页弹出666

        let txt = document.querySelector("textarea")
        // txt.addEventListener("keyup", function (e) {
        //     // console.log(e.key)键盘所敲的值
        //     if (e.key === "Enter") {
        //         console.log("666")
        //     }
        // })

        // txt.addEventListener("input", () => {
        //     console.log(txt.value)全部

        // txt.addEventListener("change", () => {
        //     console.log(txt.value)无焦点时输入

        // })

        鼠标移入事件
        txt.addEventListener("mouseenter", () => {
            txt.style.backgroundColor = "pink"
        })
        鼠标移出事件
        txt.addEventListener("mouseleave", () => {
            // this.classList.add(red)
        })


        // lv0   事件源.on事件类型=处理函数
        btn.onclick = function () {
            alert("666")
            console.log(this)
        }

    </script>

KALAXK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2023 12.14笔记

1、元素对象.style.属性名 = "属性值"，而像background-color这类有 - 则用小驼峰命名法 backgroundColor。getComputedStyle(元素对象, false)["要访问元素对象的属性"]普通属性元素对象.属性名= 属性值不在style标签里的就是普通属性。元素属性：1、普通属性 2、style样式属性 3、offset属性。获取style样式属性的属性值。设置style样式属性。
复制链接

扫一扫