JS获取/修改html元素对象

最新推荐文章于 2024-04-28 21:04:22 发布

iZer_0

最新推荐文章于 2024-04-28 21:04:22 发布

阅读量578

点赞数 1

分类专栏：学习笔记文章标签： js javascript css

本文链接：https://blog.csdn.net/qq_42016346/article/details/106671956

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS学习笔记

JS操作标签
- 获取对象
- 获取/修改对象样式
练习Demo
- input file 实现拍照上传和预览
- 两个页面传值

JS操作标签

获取对象

1.根据ID获取标签对象：document.getElementById(“ID”)
2.根据class名称获取标签对象集合：document.getElementsByClassName(“ClassName”)
3.根据HTML 标签名称获取标签对象集合：document.getElementsByTagName(“a”)

第2和第3条要指定到某个元素，要先确认好该元素在集合的位置（从0开始），如下
document.getElementsByClassName(“ClassName”)[0]
document.getElementsByTagName(“a”)[0]

获取/修改对象样式

1、getComputedStyle(obj,null)[attr]
参数1：元素对象
参数2：伪类（不是必须的，当不查询伪类元素的时候可以忽略或者写 null）
[attr]即为要获取的样式

这种方式读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。也就是该标签在网页上显示的样式
如下：

var obj_ = document.getElementById("ID_")
console.log(getComputedStyle(obj_)["width"])
//测试结果："100px"

2、obj.style
这种方式只能获取到内联样式，也就是<div id=“ID_” style=“width:100px;”>这里的样式和属性
支持获取样式也支持修改样式
因为是操作的内联样式，所以优先级是最高的
如下：

var obj_ = document.getElementById("ID_");
obj_.style.width = "200px";
console.log(obj_.style.width)
//测试结果："200px"

3、obj.getAttribute 和 obj.setAttribute
获取对象属性，也就是<div id=“ID_” style=“width:100px;”>这里的属性

var obj_ = document.getElementById("ID_");
obj_.setAttribute('style', 'height: 200px');
console.log(obj_.getAttribute("style"))
//测试结果："200px"

练习Demo

提要：html中的内容是按照HTML本身的先后顺序加载的。
在这里插入图片描述
要注意script引用或者在页面内写<script></script>的位置

如果你想操作元素，得在要操作的元素后面写，不然会遇到取不到对象或者取不到对象内容的问题

如果是写点击事件或者其它的事件，如<button onclik=“click_()”></button>这种需要写函数的
就得在标签前面写，不然会有函数未定义的问题

input file 实现拍照上传和预览

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .cam {
            position: relative;
            width: 50%;
            display: inline-flex;
            vertical-align: text-bottom;
            justify-content: space-between;
            margin-left: 4rem;
        }

        .camera {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 30%;
        }

        .shadeImg {
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 15;
            text-align: center;
            background: rgba(0, 0, 0, 0.55);
        }

        .shadeImg:after {
            display: inline-block;
            content: '';
            width: 0;
            height: 100%;
            vertical-align: middle;
        }

        .img1 {
            display: inline-block;
            vertical-align: middle;
            line-height: 1.6;
            font-size: 16px;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            margin: 0;
            padding: 0;
            max-width: 100%;
        }
    </style>
</head>

<body>
    <script>
        function prewviewImg() {
            var file = document.getElementById("fileImage");
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = document.getElementById("img1");
                    img.setAttribute("src", e.target.result);
                    $(".shadeImg").fadeIn(500);
                }
                reader.readAsDataURL(file.files[0]);
            }
        }

        function closeShadeImg() {
            $(".shadeImg").fadeOut(500);
        }
    </script>
    <form class="cam">
        <a href="javascript:">上传
            <input id="fileImage" class="camera" type="file" accept="image/*" capture="camera">
        </a>
        <a href="javascript:" onclick="prewviewImg()">预览</a>
    </form>

    <div class="shadeImg" id="shadeImg" onclick="javascript:closeShadeImg()">
        <img class="img1" id="img1" />
    </div>

</body>

</html>

两个页面传值

传值：index页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script>
        function click_(data) {
            var list_ = data.getElementsByTagName("span");
            window.location.href = "data.html?name=" + list_[0].innerText + "&time=" + list_[1].innerText;
        }
    </script>
    <div onclick="click_(this)">
        <span>data_1</span>
        <span>2020/1/1</span>
    </div>
</body>
</html>

接收：data页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div>
        <span id="name"></span>
        <span id="time"></span>
    </div>
</body>
<script>
    var url = decodeURI(location.search);
    if (url) {
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        document.getElementById("name").innerHTML = theRequest.name;
        document.getElementById("time").innerHTML = theRequest.time;
    }
</script>
</html>

-----------------------------------------------------------------我是分割线--------------------------------------------------------------

看完了觉得不错就点个赞或者评论下吧，感谢！！！

如果本文哪里有误随时可以提出了，收到会尽快更正的

iZer_0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS获取/修改html元素对象

JS学习笔记JS操作标签获取对象获取/修改对象样式练习Demoinput file 实现拍照上传和预览两个页面传值JS操作标签获取对象1.根据ID获取标签对象：document.getElementById(“ID”)2.根据class名称获取标签对象集合：document.getElementsByClassName(“ClassName”)3.根据HTML 标签名称获取标签对象集合：document.getElementsByTagName(“a”)第2和第3条要指定到某个元素，要先确认好该
复制链接

扫一扫