$("#userLevelCss").attr("style","width:78%;float: right;display: none;");
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
记录一下用JavaScript原生代码 以及jQuery 设置/获取 属性的方法：
（文章最下面有完整版代码）
首先把JavaScript的奉上
function attribute() { var val=document.getElementById("in1").value,
a1=document.getElementById("a1"),
d2=document.getElementById("d2"); //第一种直接设置本身自有属性方法
a1.href="https://www." rel="external nofollow" rel="external nofollow" +val+".com"; //第二种设置自定义属性方法
d2.setAttribute("url","https://www."+val+".com"); //获取选中属性的值
var d1Url=d1.getAttribute("url");
console.log(d1Url); //设置样式
d2.style.background="#FAB2C9";
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
运行结果如下：
再来就是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"
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
运行结果如下：
整篇代码
<!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="#" rel="external nofollow" rel="external nofollow" id="a1">超链接</a>
</div><hr><div>
<h3>jQuery</h3> <a href="#" rel="external nofollow" rel="external nofollow" 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." rel="external nofollow" rel="external nofollow" +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>
