$("#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. Guid.NewGuid().ToString()得几种格式显示

    1.Guid.NewGuid().ToString("N") 结果为:        38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid ...

  2. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

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

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

  4. C++ 模板详解 肥而不腻

    C++模板 模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 通常有 ...

  5. MySQL存储过程使用实例详解

    本文介绍关于在MySQL存储过程游标使用实例,包括简单游标使用与游标循环跳出等方法 例1.一个简单存储过程游标实例 DROP PROCEDURE IF EXISTS getUserInfo $$CRE ...

  6. redis基础之安装和配置（一）

    前言 折腾一下redis在linux环境的安装. ubantu16.04环境下安装 下载安装,依次执行命令; # 从官方网站下载安装包,注意,当前在哪个目录下执行命令,下载的包将在哪个目录下 $ wg ...

  7. spring 发布 Jax-Ws Service （一）

    1.maven依赖: <dependency> <groupId>org.springframework.ws</groupId> <artifactId&g ...

  8. linux的RMP命令（rmp包的安装与反安装）

    RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redhat Linux Packet Manager,就是Redhat的包管理器),后缀是. ...

  9. android4.0.3源码之USB wifi移植心得

    http://blog.csdn.net/eastmoon502136/article/details/7850157 http://forum.cubietech.com/forum.php?mod ...

  10. 干接点&湿接点

    干接点的定义: 无源开关:具有闭合和断开的2种状态:2个接点之间没有极性,可以互换: 常见的干接点信号有: 1.各种开关如:限位开关.行程开关.脚踏开关.旋转开关.温度开关.液位开关等: 2.各种按键 ...