offsetLeft offsetTop // DOM操作,之写入内容

最新推荐文章于 2022-09-03 16:32:49 发布

Allen·赵

最新推荐文章于 2022-09-03 16:32:49 发布

阅读量871

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108921066

版权

js 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

offsetLeft offsetTop

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding: 50px;
    }

    .div1{
        margin-left: 100px;
        position: fixed;
    }

    .div2{
        position: fixed;
    }
</style>
</head>
<body>
<div class="div1">
    <div class="div2">我是div</div>
</div>


<script>
    // offsetLeft  
    //    到定位父级左边界的间距
    // offsetTop
    //    到定位父级上边界的间距


    var oDiv = document.querySelector('.div2');
    // 每一个标签对象,都有一个属性,叫 offsetParent 
    // 表示这个标签的定位父级对象是谁
    // (1)标签本身,没有定位属性,定位父级对象 是 body
    //     此时是这个标签到body的间距 
    //     不管是body的padding,还是标签的margin,都是到body的间距
    //     如果有父级,计算的也是当前标签到 body 的总间距
    // (2)标签本身有定位,要看定位父级对象是谁
    //     position: relative;    定位父级仍然是 body
    //     position: absolute;    要看具体的定位是谁
    //     position: fixed;       定位父级是 null 指的是 视窗窗口
    ///    表示的仍然是到定位父级的间距,只是定位父级有可能不同
    // (3)本身没有定位,父级有定位属性 
    //     此时定位对象父级是 带有定位属性的父级标签
    //     表示的是到这个父级标签的间距
    // 总结:
    //     offsetLeft  offsetTop 情况很复杂
    //     需要先确定 offsetParent  定位父级对象标签
    //     获取的数据,就是当前标签,到父级定位标签的总间距
    //     先找爹,确定爹,到爹的间距  
    console.dir(oDiv);

// DOM操作,之写入内容

<div>
    我是文字内容
    <span>1</span>
    <a href="#">2</a>
    <ul>
        <li>3</li>
    </ul>
    <h1>4</h1>
</div>

<script>
    // DOM操作,之写入内容

    // 给标签对象,写入内容

    // 是,全覆盖写入
    // 新写的内容,会覆盖标签中,之前定义的内容
    //    包括文字,以及子级标签

    // 标签对象.innerHTML()   支持标签
    // 标签对象.innerText()   不支持标签

    // 对div标签,写入内容
    //    新写入的内容,会覆盖,之前div标签的所有内容
    //    包括文字,标签等

    var oDiv = document.querySelector('div');

    // oDiv.innerHTML = '我是写入的内容';


    // 1,  标签对象.innerHTML   获取标签对象中所有的内容,包括标签
    //     标签对象.innerText   获取标签对象中所有的内容,不包括标签

    console.log(oDiv.innerHTML);
    console.log(oDiv.innerText);


    // 2,  标签对象.innerHTML = '内容'  设定标签对象的内容,支持解析标签
    //     标签对象.innerText = '内容'  设定标签对象的内容,不支持,不解析标签

    // 解析h1 标签,执行结果是 写入一个 h1标签,标签内容是 我是innerHTML写入的
    oDiv.innerHTML = '<h1>我是innerHTML写入的</h1>';

    // 不支持,不解析标签,执行结果就是,纯字符串写入
    oDiv.innerText = '<h1>我是innerHTML写入的</h1>';


</script>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offsetLeft offsetTop // DOM操作,之写入内容

offsetLeft offsetTop<style> *{ margin: 0; padding: 0; } body{ padding: 50px; } .div1{ margin-left: 100px; position: fixed; } .div2{ position: fixed; }</style>&
复制链接

扫一扫