JavaScript / jQuery 同时设置单个/多个、获取元素属性值及设置style样式

最新推荐文章于 2025-06-12 11:54:20 发布

freedom_文

最新推荐文章于 2025-06-12 11:54:20 发布

阅读量8.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript jquery 文章标签： js原生设置属性 jQuery设置样式

本文链接：https://blog.youkuaiyun.com/freedomVenly/article/details/78593928

javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

本文介绍使用JavaScript及jQuery进行元素属性设置与获取的方法，并演示了如何设置链接、自定义属性及样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下用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";
    }

运行结果如下：

这里写图片描述

再来就是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"
        });

运行结果如下：

![这里写图片描述](https://img-blog.youkuaiyun.com/20171121175833456?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJlZWRvbVZlbmx5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

整篇代码

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