<!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. 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...

  2. 第五章：Admin管理后台 - 2：自定义Admin actions

    通常情况下,admin的工作模式是"选中目标,然后修改目标",但在同时修改大量目标的时候,这种模式就变得重复.繁琐. 为此,admin提供了自定义功能函数actions的手段,可以 ...

  3. Gitlab基础知识介绍

    GitLab架构图 Gitlab各组件作用 -Nginx:静态web服务器. -gitlab-shell:用于处理Git命令和修改authorized keys列表. -gitlab-workhors ...

  4. SonarQube 插件之 Issues Report & SonarLint 的配置及使用

    转载自:https://cloud.tencent.com/developer/article/1010599 1.Issues Report Plugins 介绍 使用 Issues Report ...

  5. .net程序员的android studio 初体验 (环境设置2022年10月）

      很久以前用DevExtreme写的一个Hybird APP要添加蓝牙打印功能,但是用来打包APP的phonegap被adobe关闭了,所以,只能自己用cordova去打包安卓APP,不得已,研究了 ...

  6. ArcMap布局添加图表问题

    在ArcMap分析制图过程中,经常会产生一些图表,然而在布局中添加这些图表会发现一些意想不到的问题. 问题重现 将图表直接添加到布局会发现图表有黑底,这在我们布局出图中是十分不美观的,这该如何解决呢? ...

  7. Kafka 之producer拦截器(interceptor)

    Kafka 之producer拦截器(interceptor) 一.拦截器原理 Producer拦截器(interceptor)是在Kafka 0.10版本被引入的,主要用于实现clients端的定制 ...

  8. Hbase之shell基本操作

    一.系统命令 启动hbase Shell ./bin/hbase shell 获取帮助 help 查询服务器状态 status 查询hbase版本 version 查询表 list 获取表描述 des ...

  9. 微信小程序仿手机相册组件——简单版

    仿手机相册的微信小程序组件,具备点击图片预览,长按图片出现多选框功能,读者可以根据自己的需求,依据现有数据进行删除等操作.话不多说,先看效果: 初始效果:  长按效果: 选择效果: 注意:当前只是简单 ...

  10. 漫谈Entity-Component-System

    原文链接 简介 对于很多人来说,ECS只是一个可以提升性能的架构,但是我觉得ECS更强大的地方在于可以降低代码复杂度. 在游戏项目开发的过程中,一般会使用OOP的设计方式让GameObject处理自身 ...