欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript / jQuery 设置、获取元素属性 值 设置style样式

程序员文章站 2022-07-04 11:37:04
...

记录一下用JavaScript原生代码 以及jQuery 设置/获取 属性的方法：

（文章最下面有完整版代码）

首先把JavaScript的奉上

function attribute() {

        var val=document.getElementById("in1").value,
            a1=document.getElementById("a1"),
            d2=document.getElementById("d2");

        //第一种直接设置本身自有属性方法
        a1.href="https://www."+val+".com";

        //第二种设置自定义属性方法
        d2.setAttribute("url","https://www."+val+".com");

        //获取选中属性的值
        var d1Url=d1.getAttribute("url");
        console.log(d1Url);

        //设置样式
        d2.style.background="#FAB2C9";
    }

运行结果如下：

JavaScript / jQuery 设置、获取元素属性 值 设置style样式

再来就是jQuery的

        //设置属性、值
        $("#a2").attr("href","http://www.w3school.com.cn/");

        //同时设定多个
        $("#a2").attr({
            "data-num":"50",
            "target":"view_window"
        });

        //获取选择属性的值：
        var a2Href=$("#a2").attr("href");
        console.log("a2链接地址为："+a2Href);


        //设定样式
        $("#d2").css("border","5px solid #8E00FF");

        //同时设定多个
        $("#d2").css({
            "width" : "200",
            "height" : "50",
            "background":"#E058EA"
        });

运行结果如下：

JavaScript / jQuery 设置、获取元素属性 值 设置style样式

整篇代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #d1{
            width:200px;height:50px;
        }
    </style>
</head>
<body>

<div>
    <h3>JavaScript</h3>

    <input type="text" id="in1"  value="baidu"/>

    <div id="d1"></div>

    <a href="#" id="a1">超链接</a>
</div>

<hr>

<div>
    <h3>jQuery</h3>

    <a href="#" id="a2">点我跳转</a>

    <div id="d2"></div>
</div>



<script>
    function attribute() {
        var val=document.getElementById("in1").value,a1=document.getElementById("a1"),d1=document.getElementById("d1");

        //第一种设置本身自有属性方法
        a1.href="https://www."+val+".com";

        //第二种设置自定义属性方法
        d1.setAttribute("url","https://www."+val+".com");

        //获取选中属性的值
        var d1Url=d1.getAttribute("url");
        console.log(d1Url);

        //设置样式
        d1.style.background="#FAB2C9";
    }

    attribute();

</script>


<script src="jquery-1.12.4.min.js"></script>

<script>

        //设置属性、值
        $("#a2").attr("href","http://www.w3school.com.cn/");

        //同时设定多个
        $("#a2").attr({
            "data-num":"50",
            "target":"view_window"
        });

        //获取选择属性的值：
        var a2Href=$("#a2").attr("href");
        console.log("a2链接地址为："+a2Href);


        //设定样式
        $("#d2").css("border","5px solid #8E00FF");

        //同时设定多个
        $("#d2").css({
            "width" : "200",
            "height" : "50",
            "background":"#E058EA"
        });
</script>
</body>
</html>

上一篇： java进程CPU过高问题定位

下一篇： 公钥与私钥

推荐阅读