$("#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. Sublime Text 使用指南 - 前端开发神器

    Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...

  2. Mysql中count(*),DISTINCT的使用方法和效率研究

    在处理一个大数据量数据库的时候 突然发现mysql对于count(*)的不同处理会造成不同的结果 比如执行 SELECT count(*) FROM tablename 即使对于千万级别的数据mysq ...

  3. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  4. 用于检测进程的shell脚本代码小结

    本文介绍一段shell脚本,它可以检测某进程或某服务是否正在运行,然后以邮件通知.有需要的朋友参考下 一个简单的shell脚本,用来找出关键的服务是否正在运行,适用于Linux操作系统或Unix操作系 ...

  5. atitit。获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案

    atitit.获取表格的字段注释metadata的原理以及AND 字段表格描述文档方案 1. 通过sql ide navicate获取(推荐)通过meatadata数据库获取 1 2. 通过代码获取 ...

  6. spring 发布 Jax-Ws Service （二）

    Service import javax.jws.WebMethod; import javax.jws.WebParam; import javax.jws.WebResult; import ja ...

  7. Taking A Fresh Look At What Open Source API Management Architecture Is Available

    http://apievangelist.com/2014/10/05/taking-a-fresh-look-at-what-open-source-api-management-architect ...

  8. ov5640 i2c通信异常问题

    1 异常场景如下描述 之前的测试场景: 将插在排针上的杜邦线向上拔一点,留出空间挂示波器的探针. 这种方式会导致i2c只发送一组8bit的数据,而另外两组没有发送成功.如上图所示. 因此,之前出现没有 ...

  9. Windows Phone 性能优化（二）

    这篇文章的 demo 是在 (一)的基础上进行的调整,逻辑基本相似.本文只列和 上一篇出不同的代码. 为了实现自定义的虚拟化,把上一篇文章的 ListBox 换成 ScrollViewer + Ite ...

  10. What is purpose of @ConditionalOnProperty annotation?

    http://stackoverflow.com/questions/26394778/what-is-purpose-of-conditionalonproperty-annotation **** ...