JavaScript知识——DOM增删改、操作内联样式

最新推荐文章于 2024-04-17 08:48:05 发布

七冬与小糖

最新推荐文章于 2024-04-17 08:48:05 发布

阅读量656

点赞数 1

分类专栏： JavaScript 前端知识菜鸟入门文章标签： javascript dom

本文链接：https://blog.csdn.net/xiaotangyu7dong/article/details/119727674

版权

菜鸟入门同时被 3 个专栏收录

79 篇文章 3 订阅

订阅专栏

前端知识

26 篇文章 3 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

JavaScript知识

DOM增删改
操作内联样式
- 获取元素的样式
例子

DOM增删改

 <div>
        <ul id="city">
            <li id="bj">北京</li>
        </ul>

    </div>
    <div class="btn">
        <button id="btn1">创建一个“广州”节点，添加到#city下</button>
        <button id="btn2">将“广州”节点插入到bj前面</button>
        <button id="btn3">广州节点替换北京节点</button>
        <button id="btn4">删除北京节点</button>
    </div>

var myClick = function (btn, fun) {
        var btn = document.getElementById(btn);
        btn.onclick = fun;

    }
    window.onload = function () {
        //创建一个“广州”节点，添加到#city下
        myClick("btn1", function () {
            //document.createElement()可以用于创建一个元素节点对象
            //它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
            //并将创建好的对象作为返回值返回
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            //document.createTextNode()可以用来创建一个文本节点对象，需要一个文本内容作为参数
            //将会根据该内容创建文本节点，并将新的节点返回

            /*
            * 将gzText设置li的节点
            *   appendChild()-向父节点中添加一个新的字节点
            *   - 用法：父节点.appendChild(子节点);
            */
            li.appendChild(gzText);
            var city = document.getElementById("city");
            city.appendChild(li);
        });


        //将“广州”节点插入到bj前面
        myClick("btn2", function () {
            //创建广州
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            li.appendChild(gzText);
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            //inserBefore
            //- 可以在指定的字节点前插入新的子节点
            // 父节点.inserBefore(新节点,旧节点)
            city.insertBefore(li, bj);
        });



        //广州节点替换北京节点
        myClick("btn3", function () {
            //创建广州
            var li = document.createElement("li");
            var gzText = document.createTextNode("广州");
            li.appendChild(gzText);
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            //replaceChild
            //- 可以在指定的字节点替换新的子节点
            // 父节点.replaceChild(新节点,旧节点)
            city.replaceChild(li, bj);
        });

        //删除北京节点
        myClick("btn4", function () {
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取父节点city
            var city = document.getElementById("city");
            /*
            *  removechlid()
            *   - 删除子节点
            *   - 语法：父节点.removeChild(子节点);
            * 
            */
           city.removeChild(bj);
        });
    }
</script>

其中第一步的“创建一个“广州”节点，添加到#city下”，用第二种方法：

myClick("btn5", function () {
            var li = document.createElement("li");
            li.innerHTML = "广州";
			var city = document.getElementById("city");
			city.appendChild(li);
        });

操作内联样式

操作CSS
通过JS修改元素的样式：

元素.style.样式名 = 样式值;

例子：

<script>
        window.onload =function(){
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");

            btn.onclick = function(){
                box.style.width = "300px";
        }
        }
    </script>
    <style>
        #box{
            height: 150px;
            width: 150px;
            background-color: red;
        }
    </style>
<body>
    <div id="box"></div>
    <br>
    <button id="btn">点击一下</button>
</body>

注意如果CSS的样式名中含有-，比如background-color，这种样式名是不合法的。去掉-改成大写。
backgroundColor

通过style属性设置的样式都是内联样式，内联样式具有较高的优先级。

但是如果在样式中，有!important，则样式会有最高的优先级，会使得JS失效。
所以尽量不要使用!improtant

获取元素的样式

上述JS中的修改和读取的都是内联样式，如果想读取样式表中的样式，就没有办法了。

语法：
	元素.currentStyle.样式名
	//可以读取当前显示的样式

但是这个方法只有IE支持

在其他浏览器的方法：
getComputedStyle()这个方法来获取当前的样式，这个是window方法，可以直接使用
需要两个参数：
1、要获取样式的元素；
2、可以传递一个伪元素，一般都传null；

例子

在这里插入图片描述

当scrollHeight - scrollTop == clinetHeight 时，说明滚动条到底了。

但是但是！！！在调试过程中发现，即使滚动条到底了，也无法触发行为，原因是：
调试得知chrome浏览器下scrollTop是小数，而clientHeight和scrollHeight始终是整数。所以在相减之后，结果始终是一个大于clinetHeight的小数。

解决方法：将等式改为不等式，并且左边-1：scrollHeight - scrollTop -1 < clinetHeight

例子：阅读用户须知，滚动条不到底，无法勾选：

<script>
    window.onload = function () {
        //滚动条到底的时候，表单才能用
        var info = document.getElementById("info");

        var inputs = document.getElementsByTagName("input");

        info.onscroll = function () {
            //检查滚动条是否到底
            if (info.scrollHeight - info.scrollTop - 1 < info.clientHeight) {
                inputs[0].disabled = false;
                inputs[1].disabled = false;
            }

        };
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert(info.scrollHeight - info.scrollTop);
            alert(info.clientHeight);
        };

    };
</script>
<style>
    #info {
        width: 300px;
        height: 500px;
        background-color: #bfa;
        overflow: auto;
    }
</style>

<body>
    <h3>欢迎用户注册</h3>
    <p id="info">
      ...
        我到底了~~</p>
    <button id="btn">测试</button>
    <input type="checkbox" name="" id="" disabled="disabled">我已仔细阅读，一定遵守协议
    <input type="submit" value="下一步" disabled="disabled">
</body>

在某个区域内，鼠标移动的坐标会被记录下来：

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

<script>
    window.onload = function () {
        var areaDiv = document.getElementById("areaDiv");
        var showDiv = document.getElementById("showDiv");

        areaDiv.onmousemove = function (event) {
            //在showDiv里面显示鼠标坐标
            // alert(event);
            var x= event.clientX;
            var y= event.clientY;
            showDiv.innerHTML = "x="+x+","+"y="+y;
        }
    };
</script>
<style>
    #areaDiv {
        width: 350px;
        height: 150px;
        border: 1px solid black;
    }

    #showDiv {
        width: 350px;
        height: 50px;
        border: 1px solid black;
    }
</style>

<body>
    <div id="areaDiv"></div>
    <br>
    <div id="showDiv"></div>
</body>

在这里插入图片描述

div跟随鼠标走动

<style>
    #box{
        height: 150px;
        width: 150px;
        background-color: red;
        position:absolute;

    }
</style>
<script>
    window.onload = function(){
        var box = document.getElementById("box");
        document.onmousemove = function(event){
            var left = event.clientX;
            var top = event.clientY;
            var st = document.documentElement.scrollTop;
            var sl = document.documentElement.scrollLeft;
            box.style.left = left+sl+"px";
            box.style.top = top+st+"px";
        }
    }
</script>
<body  style="height: 1000px; width: 5000px;">
    <div id="box"></div>
</body>

七冬与小糖

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识——DOM增删改、操作内联样式

JavaScript知识DOM增删改操作内联样式获取元素的样式例子DOM增删改 <div> <ul id="city"> <li id="bj">北京</li> </ul> </div> <div class="btn"> <button id="btn1">创建一个“广州”节点，添加到#city下</button
复制链接

扫一扫