首页 技术 正文
技术 2022年11月23日
0 收藏 452 点赞 2,840 浏览 2009 个字
$("#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如何为元素设置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"
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

运行结果如下:

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="#" 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>

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141710.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,090
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,509
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,320
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,315
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,920
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,105
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站