$("#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误删root用户或者忘记root密码解决方法

    解决方法一: 到其他安装了Mysql的服务器(前提是要知道该服务器上Mysql的root用户密 码),打开[Mysql的安装目录/var/mysql],将其中的user.frm.user.MYD.us ...

  2. php AES加密解密的例子

    一共有两个文件:AES.php(aes算法类文件)和aesDemo.php(应用实例文件) aesDemo.php:例子, <?php require_once('./AES.php'); // ...

  3. 【Android】15.1 后台任务和前台任务

    分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 Android的活动(Activities)可以有多种状态,具体取决于用户的行为以及对操作系统的要求.虽然Acti ...

  4. jsp学习之scriptlet的使用方法

    scriptlet的使用 jsp页面中分三种scriptlet: 第一种:<%  %>  可以在里面写java的代码.定义java变量以及书写java语句. 第二种:<%! %> ...

  5. IIS网站本机可以访问，局域网其他机器无法访问

    [开始]打开[控制面板],选择[WINDOWS 防火墙],进入 步骤阅读 2 在防火墙界面,选择左侧边栏的[高级设置] 步骤阅读 3 在弹出的高级安全Windows防火墙界面中,选择左侧边栏的[入站规 ...

  6. nodejs具体解释

    文件夹 javascript与node.js     javascript与你     因为javascript真正意义上有两种,甚至能够说是三种形态(从最早的作为DHTML进行增强的小工具,到像jQ ...

  7. [pwm]PWM的输入捕捉模式

    对于stm32来说,输入捕捉模式有两种: 普通输入捕捉模式:经常用来测量脉冲宽度和频率,例如测量脉冲宽度,TIM5_CH1来捕获高电平脉宽,首先先设置输入捕获为上升沿触发,然后记录下发生上升沿时TIM ...

  8. 关于报错“syntax error near unexpected token `”和回车换行

    本来是很简单一个事情,转过来是因为打字机这事比较有趣…… http://blog.csdn.net/xyp84/archive/2009/08/11/4435899.aspx 摘要一下: 回车 换行 ...

  9. JavaScript概述.pdf

    第1章 JavaScript概述 第2章 使用JavaScript 第3章 语法.关键保留字及变量 第4章 数据类型 第5章 运算符 第6章 流程控制语句 第7章 函数 //没有参数的函数 funct ...

  10. 隐马尔科夫模型(hidden Markov model, HMM)