<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>

    <style>

        #box{

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="box" style="width: 100px"></div>

    <ul>

        <li>11111</li>

        <li>11111</li>

        <li>11111</li>

        <li>11111</li>

        <li>11111</li>

        <li>11111</li>

    </ul>

</body>

</html>

<script>

    // css()    行内和非行内的都可以获取

    console.log($('#box').css('width'))

    console.log($('#box').css('height'))

    console.log($('#box').css('background-color'))

    // css() 设置样式

    $('#box').css('width','200px')

    $('#box').css('height',200)

    $('#box').css('background-color','red')

    $('ul li').css('color','blue')  //隐式迭代（不用主动遍历）

    // css({}) 批量设置样式

    $('ul li:eq(3)').css({width:200,height:200,backgroundColor:'yellow'})

</script>

　　

jquery 操作样式的更多相关文章

  1. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  2. JQuery操作样式以及JQuery事件机制

    1.操作样式     1.1 css的操作     功能:设置或者修改样式,操作的是style属性 操作单个样式 // name:需要设置的样式名称 // value:对应的样式值 // $obj.c ...

  3. Jquery操作样式

    1.CSS(name,value) 修改单个样式 $(function(){ $(".divcontent").css("background","r ...

  4. jQuery操作样式知识总结

    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $(&qu ...

  5. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  7. jquery 操作

    Jquery使用时要引用,引用时放在最前. Jquery: $代表选择器, $(document) ready(function(e){}):找到页面,页面加载完成后执行. JS选取元素操作内容操作属 ...

  8. JQuery操作DOM(8)

    一.jQuery操作样式 1.设置和获取样式 /* 单个样式 */ $(selector).css(属性,值): /* 多个样式 */ $(selector).css({属性:值,属性:值}); /* ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  10. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. [BJDCTF2020]Easy MD5 WP

    老样子 打开看看 你会发现 啥也没有 有一个输入框,随便输入看看 抓包发现跳转leveldo4.php 同时看到 hint 里面有select * from 'admin' where passwor ...

  2. 【译】CLR类型加载器设计

    前言 本文翻译自BotR中的一篇,原文链接 Type Loader Design ,可以帮助我们了解CLR的类型加载机制(注意是Type类型,而不是Class类),文中涉及到术语或者容易混淆的地方,我 ...

  3. 第一个Django应用 - 第二部分：Django数据库配置，模型和后台

    汇总操作 注:polls为应用名 1.执行命令:python manage.py migrate,生成默认的数据库表等 2.修改应用的models.py文件,添加数据库表模型等 3.INSTALLED ...

  4. MySQL集群搭建(6)-双主+keepalived高可用

    双主 + keepalived 是一个比较简单的 MySQL 高可用架构,适用于中小 MySQL 集群,今天就说说怎么用 keepalived 做 MySQL 的高可用. 1 概述 1.1 keepa ...

  5. Redash中文版安装问题大全

    Redash的安装比较复杂,由于系统环境组件版本不同,可能会出现这样那样的问题,我们把安装过程中常见问题记录如下: 1.git clone 经常提示:RPC失败,远端意外挂断.过早的文件结束符.ind ...

  6. 努力一周，开源一个超好用的接口Mock工具——Msw-Tools

    作为一名前端开发,是不是总有这样的体验:基础功能逻辑和页面UI开发很快速,本来可以提前完成,但是接口数据联调很费劲,耗时又耗力,有时为了保证进度还不得不加加班. 为了摆脱这种痛苦,经过一周的努力,从零 ...

  7. C#-6 运算符和语句

    一 运算符重载 可以重定义或重载 C# 中内置的运算符. 重载运算符是具有特殊名称的函数,是通过关键字 operator 后跟运算符的符号来定义的. public static Box operato ...

  8. sql语句的组成

    数据定义语言(DDL,Data Definition Language):包括CREATE(创建)ALTER(修改)DROP(删除)等. 数据操纵语言(DML,Data Manipulation La ...

  9. linux操作系统运行一个java程序并外网访问

    (一)安装jdk 1.新建文档java  : mkdir java 2.进入java并且下载jdk     下载jdk : wget --no-check-certificate --no-cooki ...

  10. wampServer配置WWW根目录遇到的坑

    直接在官网下载之后开始安装,一切正常 打开使用,一切正常 设置WWW目录.坑了一波 按照的都是百度上的教程,设置httpd.conf 这里配置之后网页访问127.0.0.1 还是localhost都还 ...