addClass()和css()的区别
1、优先级css() > addClass()
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><style>#one {width: 400px;height: 200px;background-color: #aaffff;text-align: center;}#two {margin-top: 10px;width: 400px;height: 200px;background-color: greenyellow;text-align: center;}.width-500{width: 500px;background-color: #000000;}</style><body><div id='one'><button >按钮</button></div><div id='two'><button >按钮</button></div><script>$(function(){$('#one button').click(function(){$('#one').addClass('width-500');})$('#two button').click(function(){$('#two').css('width','500');$('#two').css('background-color','#000000');})})</script></body>
</html>
初始:
点击按钮后:
one没有变化,因为类选择器的优先级低于id选择器,解决办法是加上!important
而css()处理的是内联样式,直接通过元素的style属性附加到元素上的
2、css()不可保存旧值,addClass()可以通过removeClass()移除
.width-500{width: 500px !important;background-color: #000000 !important;}
$('#one button').click(function(){$('#one').toggleClass('width-500');})
点击按钮可设置/取消 width-500
addClass()和css()的区别相关推荐
- JQuery中.css()与.addClass()设置样式的区别
对于样式的设置,我们学了addClass与css方法,那么两者之间有什么区别? 可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类.css方法是通过Ja ...
- CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...
- readonly与disabled属性在css中区别
论readonly与disabled在css中区别 之前在项目中遇到的一个问题,现在想把它记录下来. 当项目需求上需要在文本框中禁用输入某个值的时候,我第一个反应是用了disabled,因为之前一直接 ...
- scss、sass 和 css 的区别
项目中,会经常使用诸如scss.sass的style样式,它们和css有什么区别呢? less大家应该都不陌生,同样的scss.sass一样,它们都可以称为:CSS预处理器语言. 简单来说,scss和 ...
- 外观html与外观css的区别,用房间和装修来解读html代码与css样式的区别和关系
想要了解html与css的区别和关系,就必须要知道这2个东西的特点和主要用途用法等.html语言是一种超文本标记语言,通过html语言中的各种标签(如table.p.div等),可以设计出很多不同结构 ...
- 微信小程序 WXSS和CSS的区别?什么是WXSS?
1.什么是WXSS wxss全名是WeiXin Style Sheets 是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS.本质上和css没区别,只是在css基础上创新了一些参数, ...
- js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份 今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
- html em px的不同,CSS:区别 px、em、rem
区别px 在缩放页面时无法调整那些使用它作为单位的字体.按钮等的大小: em 的值并不是固定的,会继承父级元素的字体大小,代表倍数: rem 的值并不是固定的,始终是基于根元素 的,也代表倍数. em ...
- vb.net 打开ie 传参数_FF与IE对javascript和CSS的区别?
1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName& ...
- 导入式样式表CSS与链接式样式表CSS的区别
<!-- 链接外部样式:也就是在与<head>与</head>标记之间加入一个<link>标记. --> <head> <link h ...
最新文章
- PyCharm代码回滚,恢复历史版本
- Valid Sudoku leetcode java
- python深度学习NER任务中:对段落的分割
- OCP 论证书籍 -- ORACLE DATABASE 10G OCP Certification All-in - One Exam Guide
- 爬取了BOSS直聘、拉勾等近1000+招聘需求,总结出3年+Java开发的高频技术需求
- 僵尸肖恩黑胶唱片_建立一个非常适合黑胶唱片的DIY放大器套件
- 数据库半年回顾:国外波澜不惊,国内势如破竹
- 实例对象的索引的方法
- 优麒麟 20.04 LTS 版本发布,UKUI3.0 灵动转身
- JavaScriptDom操作与高级应用(八)
- matlab常用滤波处理(图片)小波、高斯、均值、中值
- HBuilderX踩坑记录(1)—— vivo iqoo z1开启adb调试
- 计算机对写字教学的冲淡,不断改进评价方法努力促进写字教学
- 圆锥角膜怎么发现_角膜移植术-如果一切都不好(以及有关现代方法的一些知识),“修复”眼睛的最后选择
- 百度搜索结果左侧图片设置方法
- 长沙理工大学ACMore编程协会2018年新生赛(重现赛)
- 用Excel生成Ansys *VREAD函数所需的具有固定字符长度和小数位数的数据
- 【已解决】vagrant up下载box速度太慢的解决方法
- 给定0-1矩阵,求连通域
- Topy Desk Privacy Policy
热门文章
- 基于 SpringBoot 手写 RPC 框架
- 手机微信wifi怎么连接到服务器地址,出门在外用手机流量太贵,教你一招,用微信就能连接附近wifi...
- iOS自动化测试需求实现(iOS按键精灵类似)
- 简单的WGS84转UTM程序[C++]
- 用html5画瀑布图,漂亮的Excel瀑布图,竟然如此简单~~
- Jetpack:Room超详细使用踩坑指南!
- python #hsv空间中Hue色度/色调在色相环上的角#冷暖色调 在色相环上的范围
- PYMOL-note
- kotlin版贪吃蛇小游戏
- es管理器免root_国产应用也强大 ES文件浏览器增加ROOT管理