jquery如何为元素设置style?
$("#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."+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="#" 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>
jquery如何为元素设置style?的更多相关文章
- JQuery DOM操作:设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换
JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- jquery操作html元素之( 获取并设置 CSS 类)
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- jquery如何判断元素是否被点击、属性操作、class操作
1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
- jQuery对html元素的取值与赋值实例详解
jQuery对html元素的取值与赋值实例详解 转载 2015-12-18 作者:欢欢 我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...
随机推荐
- Mysql 数据库数值类型详解
MySQL 支持所有标准SQL 中的数值类型,其中包括严格数值类型(INTEGER.SMALLINT.DECIMAL 和NUMERIC),以及近似数值数据类型(FLOAT.REAL 和DOUBLE P ...
- ajax处理select下拉表单
$('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...
- Redis(十六):集群搭建(手动和自动)
一.概述 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):slave->master ...
- POJ 1321:棋盘问题
棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21666 Accepted: 10765 Descriptio ...
- XVAG音频文件格式提取
索尼的一种游戏音频格式,通过vgmstream工具可以提取 工具已经下载好:(包含dll包) http://files.cnblogs.com/files/hont/vgmstream-r1040-t ...
- sql server 列修改null 变成not null
ALTER TABLE [table_name] ALTER COLUMN [column_name] [datetime] NOT NULL --datetime是列的类型
- 关于release后retainCount还是1的问题
转自:http://www.cocoachina.com/bbs/read.php?tid=175523 realse之后再调用还能调用的的问题,我做了这么多年也是经常遇到,也曾经试图寻找原因, 就像 ...
- mac 写NTFS磁盘
最简单的方法就是把 OS X 自带的 mount_ntfs 默认加载方式从只读改成读写, 具体方法如下 # 用 root 身份做如下操作 (高危! 请切记自己在干什么)sudo -s cd /sbin ...
- [system]c/c++调用cat命令
因为cat并不是一个带返回的命令,而是输出到标准输出.所以使用system("cat /sys/class/gpio/...."); 得不到我们想要的结果. 下面的/bin/ls同 ...
- 使用shell读取文本文件发送到kafka
#!/bin/sh ## 参数定义 dt=`date +"%Y%m%d" -d "-1 days"` outpath=/xxxx_log_${dt}.txt b ...