$("#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?的更多相关文章

  1. JQuery DOM操作:设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换

    JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...

  2. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  3. jquery操作html元素之( 获取并设置 CSS 类)

    jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

  4. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  5. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  6. jquery如何判断元素是否被点击、属性操作、class操作

    1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...

  7. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  8. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  9. jQuery对html元素的取值与赋值实例详解

    jQuery对html元素的取值与赋值实例详解 转载  2015-12-18   作者:欢欢   我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...

随机推荐

  1. Mysql 数据库数值类型详解

    MySQL 支持所有标准SQL 中的数值类型,其中包括严格数值类型(INTEGER.SMALLINT.DECIMAL 和NUMERIC),以及近似数值数据类型(FLOAT.REAL 和DOUBLE P ...

  2. ajax处理select下拉表单

    $('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...

  3. Redis(十六):集群搭建(手动和自动)

    一.概述 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):slave->master ...

  4. POJ 1321:棋盘问题

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21666   Accepted: 10765 Descriptio ...

  5. XVAG音频文件格式提取

    索尼的一种游戏音频格式,通过vgmstream工具可以提取 工具已经下载好:(包含dll包) http://files.cnblogs.com/files/hont/vgmstream-r1040-t ...

  6. sql server 列修改null 变成not null

    ALTER TABLE [table_name] ALTER COLUMN [column_name] [datetime] NOT NULL --datetime是列的类型

  7. 关于release后retainCount还是1的问题

    转自:http://www.cocoachina.com/bbs/read.php?tid=175523 realse之后再调用还能调用的的问题,我做了这么多年也是经常遇到,也曾经试图寻找原因, 就像 ...

  8. mac 写NTFS磁盘

    最简单的方法就是把 OS X 自带的 mount_ntfs 默认加载方式从只读改成读写, 具体方法如下 # 用 root 身份做如下操作 (高危! 请切记自己在干什么)sudo -s cd /sbin ...

  9. [system]c/c++调用cat命令

    因为cat并不是一个带返回的命令,而是输出到标准输出.所以使用system("cat /sys/class/gpio/...."); 得不到我们想要的结果. 下面的/bin/ls同 ...

  10. 使用shell读取文本文件发送到kafka

    #!/bin/sh ## 参数定义 dt=`date +"%Y%m%d" -d "-1 days"` outpath=/xxxx_log_${dt}.txt b ...