兼容性设置对象内容和读取对象内容

最新推荐文章于 2021-11-11 16:57:08 发布

浩哥学习编程之路

最新推荐文章于 2021-11-11 16:57:08 发布

阅读量163

点赞数

分类专栏：兼容性封装

本文链接：https://blog.csdn.net/m0_46978034/article/details/117333529

版权

兼容性封装专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
</head>

<body>
    <div>哈哈</div>
    <p>嗯嗯</p>
    <script>
        var Div = document.querySelector('div')
        var pnode = document.querySelector('p')
            // 对象.innerhtml='哈哈'这是在设置内容
            // 对象.textContent这是在读取值

        // 要求设置封装使用innerhtml和textContent对一个对象设置内容和读取内容
        // 要求高版本浏览器既可以使用innerhtml又可以使用textContent 而低版本只能使用innerhtml不能使用textContent
        function designingCompatible(obj, content) { //注意：我们需要俩个参数第一个参数是你设置传入的对象名称，第二个参数是你要传入设置的内容content是代表你传入的你要设置的内容
            if (arguments.length == 2) { //如何对一个函数实现俩个功能我们可以借助与arguments来 每一个函数都内置了arguments 这里如果arguments长度为1就是设置值如果长度为2就是在读取值 要么是读取要么是设置就使用到了if语句
                // 设置值
                if (obj.textContent) { //如果你的浏览器能使用textContent读取到值就代表浏览器是高级的就可以使用textContent来设置值如果不能读取到值就代表是低级的浏览器就使用innerhtml来设置值
                    obj.textContent = content
                } else {
                    obj.innerHTML = content
                }
            } else {
                // 读取值
                var reslut = '' //声明一个变量用于接收读取到的值
                if (obj.textContent) { //如果你的浏览器使用textContent读取到内容就代表浏览器是高级的，如果使用textContent读取不到就代表这浏览器是低级的就使用innerhtml读取
                    reslut = obj.textContent
                } else {
                    reslut = obj.innerHTML
                }

            }
            return reslut //返回最后读取的值
        }
        console.log(designingCompatible(Div)); //这是在读取值
        console.log(designingCompatible(pnode));
        console.log(designingCompatible(pnode, '123')); //这是在设置值，设置值的时候有值则是改，无值则是在增 
        console.log(designingCompatible(Div, '456'));
    </script>
</body>

</html>

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容性设置对象内容和读取对象内容

<!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>Do
复制链接

扫一扫