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

ゝ一世哀愁。 2022-06-05 07:37 342阅读 0赞

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

#### 运行结果如下： ####

![这里写图片描述][SouthEast]

--------------------

#### 再来就是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.csdn.net/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>

[SouthEast]: /images/20220605/d87a3d21819a4bba9691d57ceb4a185e.png