JavaScript / jQuery 同時 設定單個/多個、 獲取元素屬性 值 及 設定style樣式
阿新 • • 發佈：2019-02-08
記錄一下用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" });
執行結果如下：
整篇程式碼
<!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>