$("#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. 【C/C++语言】int 在计算机内部的存储

    int在32位计算机中占4个字节,主要是想弄清楚这4个字节的在内存中存放的顺序. #include <iostream> using namespace std; typedef stru ...

  2. 获取Oracle数据库中字段信息

    select t.DATA_PRECISION,t.DATA_SCALE,t.DATA_LENGTH,t.DATA_TYPE,t.COLUMN_NAME, t.NULLABLE,t.DATA_DEFA ...

  3. db2 连接报错connect。 ERRORCODE=-4499, SQLSTATE=08001（转载）

    在使用data studio连接远程DB2数据库时报错如下: [jcc][Thread:main][SQLException@5b775b77] java.sql.SQLException [jcc] ...

  4. Spring--初始化IOC容器的几种方式

    初始化beanfactory主要有以下的三种方式:    1.filesystemXml Resource resource = new FileSystemResource("beans. ...

  5. 存档格式选择--JSON

    游戏里存档可以直接用lua,但是lua需要有一定编程基础:另外可以用ini,不过ini又太简单了,复杂的 格式无法用ini描述:还可以用xml,它的表达能力非常丰富,甚至有限数据库都用xml来作存储结 ...

  6. C语言 · 大数乘法

    #include<stdio.h> #include<string.h> ]; void mult(char a[],char b[]) { ,alen,blen,sum=,r ...

  7. SpringMVC请求后台地址URL没有.*的几种实现方式

    今天做项目,由于项目是通过扫二维码进入,二维码存放的地址不希望有 .do,而是http:xxxx:8080/xxx/yyy/zzz的格式(zzz为参数),但是项目其它请求url后面都必须要有.do,想 ...

  8. Mac下修改应用程序的菜单快捷键！

    点击左上角苹果按钮,系统偏好设置 > 键盘 > 快捷键 > 应用快捷键 点击右下角添加按钮,选择chrome程序,输入菜单中文名以及快捷键 1.如何用F5刷新 鼠标悬停在左上角的刷新 ...

  9. SQL Server 数据库同步，订阅、发布、复制、跨服务器

    随便说两句 折腾了一周,也算把数据库同步弄好了.首先局域网内搭建好,进行各种测试,弄的时候各种问题,弄好以后感觉还是挺简单的.本地测试好了,又在服务器进行测试,主要的难点就是跨网段同步,最后也解决了, ...

  10. C++ 类的深拷贝和浅拷贝完美解决

    //类的深拷贝和浅拷贝 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; class Poin ...