JavaScript对HTMl标签元素的获取与设置

最新推荐文章于 2023-09-05 20:46:54 发布

toptap8_nn

最新推荐文章于 2023-09-05 20:46:54 发布

阅读量237

点赞数

分类专栏： web前端文章标签： javascript html5 html 前端 jquery

本文链接：https://blog.csdn.net/u011713916/article/details/119939571

版权

web前端专栏收录该内容

9 篇文章 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>
    <script>
        // window.onload 作用是等待页面加载完毕执行后面函数
        window.onload = function (){
            // document.getElementById('op'); 作用通过id获取元素标签，返回值为元素标签体
            // 返回值形式为： [object HTMLParagraphElement]
            var oP =document.getElementById('op');
            // alert(oP);作用为弹窗
            alert(oP);

        };

    </script>
</head>
<body>
    <!-- 形式为[object HTMLParagraphElement] -->
    <p id='op'>哈哈，我是p标签</p>
    <!--  -->
</body>
</html>

标签属性的获取与设置

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

    <style>
        /* 创建一个类 */
        .butnstyle{
            background-color: chartreuse;

        }
    </style>
    <script>
        window.onload =function(){
            // 根据id获取标签对象
            var oBtn = document.getElementById("btn1");//返回值为标签
            // 获取标签的属性
            alert(oBtn.type);
            alert(oBtn.value)
            // 设置属性
            oBtn.name = 'username';
            // 设置样式的属性
            // oBtn.style.background = "red";

            // 设置标签的类属性
            // 等价于calss ='butnstyle'

            oBtn.className ="butnstyle";


        };
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
</body>
</html>

设置标签包裹的内容-inner html

<!DOCTYPE html>
<html lang="zh">
<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>
    <script>
        window.onload =function(){
            var dIv1 =document.getElementById("div1")
            // 获取标签包裹的内容innerHTMl
            alert(dIv1.innerHTML);
            // 设置标签包裹的内容
            dIv1.innerHTML ="<a herf ='http://www.baidu.com'>baidu</a>"

        };
    </script>
</head>
<body>
    <!-- 这是一个div的标签这些字就是标签包裹的内容 -->
    <div id="div1">这是一个div的标签</div>
</body>
</html>

设置标签样式及其属性

<!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>
    <script src="./main.js"></script>
    <script>
        $(function(){
            var $p1 = $("p");
            alert($p1);
            // prop 获取标签的属性
            var $input1 = $("#pwd1");
            alert($input1);
            var $name1 = $input1.prop("name");
            alert($name1);
            // 设置属性
            $input1.prop({'value':'shiwen159258','class':'pwd'});

        });
    </script>

    <style>
        .pwd{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <p>这是一个P标签</p>
    <input type="password" name="password" id="pwd1">
</body>
</html>