jQuery操作样式

  1. css操作:
    作用:操作元素的样式及style属性
    例:

1.1 操作单个属性:
$('选择器').css("属性名","属性值")

1.2 操作多个属性,参数设置为对象,在对象中添加要操作的属性:
$("选择器").css({
"属性名1":"属性值"
"属性名2":"属性值"
"属性名3":"属性值"
})

1.3 也可以用于获取属性的值
$("选择器").css("属性名")
返回的是属性名对应的值,如果获取的是多个元素,只会返回第一个元素获取的属性值

  1. class操作
    作用:可以使css样式的代码做到复用的效果,把css样式封装到类选择器中,需要个元素添加样式时,只需要给元素添加一个类名即可,不需要时删除类名即可.
    例:

2.1 添加样式名:
$("选择器").addClass("类名") //注意:添加类名不需要加符号 .

2.2 移除类名
$('选择器').removeClass('类名')

2.3 查询元素是否有该样式
$('选择器').hasClass('类名')

2.4 切换样式名
//判定元素是否有该样式,如果没有就添加该样式名,如果有就移除该样式名
$('选择器').toggleClass('类名')

(0)

相关推荐

  • CSS入门

    CSS概述 Cascading Style Sheets : 层叠样式表 主要用作用:用来美化我们的HTML页面的,HTML 决定网页的骨架,CSS化妆,将页面的HTML和美化进行分离 CSS的简单语 ...

  • css 选择器

    CSS 选择器 一.常用选择器 元素选择器 p {} id 选择器 #name {} class 类选择器 .box {} 二.复合选择器 交集选择器 p.red {}.box.red {} 选中同时 ...

  • css选择器之基本选择器

    什么是选择器呢?每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是"选择器". "选择器"指明了{ ...

  • 小白入门你教程CSS选择器

    CSS越来越重要是大家中所周之的,但是还有很多人不知道CSS有哪些基本选择器和高级选择器?下面我们来总结一下. CSS有哪些基本选择器和高级选择器? ID选择器>类选择器>标签选择器 行内 ...

  • 博客中css样式的正确设置

    一.简介 博客园的文章是支持html代码和css样式的,即使是markdown写作.当某个标签需要特制样式时,我们可以自定义样式来覆盖掉原本的样式. 二.css样式优先级 参考至>>菜鸟教 ...

  • css总结-笔记--部分非原创--属于资源整合

    文章目录 一.css基础教程 选择器的优先级: 4.1.派生选择器 4.2.id选择器 讨论:为什么相同id的值在每个 HTML 文档中只能出现一次? 3.1选择器的分组 3.2曾经存在过的继承问题 ...

  • CSS选择器

    标签选择器 例如:`p`.`a`.`h[1,6]`.`span`.`div`... 类选择器(class) class 选择器以 "." 来定义. 如:.id1{样式属性:值;} ...

  • css选择器有哪些, 选择器的权重优先级

    特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.--< ...

  • js day01 变量, 引入, 属性操作, 样式操作

    一, javascript引入 1.行内 不建议使用 是在开始标签内 写入js的代码 注意:我们一般不使用行内,因为会降低服务器或者浏览器的性能,增加维护的难度 <!-- 需求:在开始标签内写入 ...

  • 3.jQuery操作DOM对象的方法

    # jQuery操作DOM 和 增删改查 - 1.html() ```js $('ul li').html();//获取ul下第一个li元素下的内容 $('ul li').html('9');//把u ...

  • jQuery——标签操作之(样式、文本内容、属性、文档处理)操作

    一.标签操作之样式操作 样式类 addClass(); // 添加指定的CSS类名. removeClass(); // 移除指定的CSS类名. hasClass(); // 判断样式存不存在 tog ...

  • word样式设置操作视频:套用预设样式及新建或修改格式的方法

    word样式设置操作视频|word套用预设样式视频|word新建样式方法视频|word修改样式格式视频 本视频教程由部落窝教育分享.

  • word批量处理选中所有表格选中文档中所有表格,便于后续的操作,例如删除、添加样式、修改边框等。

    word批量处理 选中所有表格 选中文档中所有表格,便于后续的操作,例如删除.添加样式.修改边框等.

  • jQuery节点操作

    创建元素节点 示例: // $(htmlStr) // htmlStr:html格式的字符串 创建一个span标签: `$("<span>我是span标签</span> ...

  • jquery属性操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  • jquery类操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  • 菜鸟记666-文档样式瞬间应用?这个操作可能您没用过

    万一您身边的朋友用得着呢? 各位朋友早上好,小菜继续和您分享经验之谈,截止今日小菜已分享600+篇经验之谈,可以文章编号或关键词进行搜索. 微信推送规则发生改变,如果您想看到小菜每个工作日的经验之谈, ...