jq中的addClass()方法与样式冲突

添加类样式方法

addClass()：向被选元素添加指定的类名

注意：该方法仅仅只是在原有基础上添加属性，不会覆盖已存在的 class 属性

提示：如需添加多个类，使用空格分隔类名

一、添加一个class属性

<style>.div {width: 200px;height: 200px;background-color: pink;}.style {width: 300px;background-color: yellow;border: greenyellow 5px solid;}
</style><body><div class="div"></div>
</body>
<script>$('.div').addClass('style')
</script>

通过元素选择发现style成功追加在了div的后面

结果

二、这时候如果将div和style属性的定义顺序调换后，就出现了问题

<style>.style {width: 300px;background-color: yellow;border: greenyellow 5px solid;}.div {width: 200px;height: 200px;background-color: pink;}
</style><body><div class="div"></div>
</body>
<script>$('.div').addClass('style')
</script>

发现背景颜色和宽度并没有改变，复习css的样式覆盖规则后知道了问题所在

样式冲突时，样式权值高者获胜

样式权值相同时，后定义者获胜

权值定义如下：

CSS选择器	权值
标签选择器	1
类选择器	10
ID选择器	100
内联样式	1000
伪元素(:first-child等)	1
伪类(:link等)	1

很明显，这里样式发生了冲突，并且权值一样，所以看定义顺序

div在style后定义故页面渲染了div的样式

三、添加多个class属性

<style>.div {width: 200px;height: 200px;background-color: pink;}.style {width: 300px;background-color: yellow;border: greenyellow 5px solid;}.text {color: brown;font-size: 30px;text-align: center;}
</style><body><div class="div">addClass</div>
</body>
<script>$('.div').addClass('style text')
</script>

jq中的addClass()方法与样式冲突相关推荐

jq中的append方法
jq的append()就是在元素的最后面添加元素. 尤其注意的一点:如果是内部元素,第一个用append()方法添加的最后,那么第一个自动删除掉. 代码` <script type=" ...
jq中的contains方法
定义和用法 $.contains() 方法用于判断指定元素内是否包含另一个元素.即判断另一个DOM元素是否是指定DOM元素的后代. 实例检测一个元素包含在另一个元素之内: $(function () ...
ajax异步获取右侧html,Ajax异步获取html数据中包含js方法无效的解决方法
Ajax异步获取html数据中包含js方法无效的解决方法页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $. ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
jq创建元素并设置css样式,JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
tableView的plain样式的headerView的上拉过程中悬停解决方法
tableView的plain样式的headerView的上拉过程中悬停解决方法参考文章: (1)tableView的plain样式的headerView的上拉过程中悬停解决方法 (2)https: ...
jquery中AddClass()方法问题
jquery中AddClass()方法要求对应的元素中不能不能有style属性设置,否则无法设置新css显示类,例如> $("img").hover(function () ...
怎么在jq中添加html样式,jquery怎么添加css样式
jquery添加css样式的方法:1.使用addClass()方法添加css样式,语法如"$(selector).addClass(class)":2.使用css()方法设置css ...
JQ中val(),html(),text()三种方法的区别
JQ中val(),html(),tex()三种方法的区别是内容不一样 text(参数); 有参数是改变他的文本,无值是获取他的文本 var(); 有参数是改变他的val属性,无值是获取他的val属性 ...
layui中layui-form与select2下拉多选样式冲突的解决方案
layui中layui-form与select2下拉多选样式冲突的解决方案@TOC 去掉搜索按钮打开控制面板f12 查看元素可以看到搜索按钮是由after动态生成,找到这个样式文件,然后注释清除 ...

jq中的addClass()方法与样式冲突

添加类样式方法

一、添加一个class属性

二、这时候如果将div和style属性的定义顺序调换后，就出现了问题

三、添加多个class属性

jq中的addClass()方法与样式冲突相关推荐

最新文章

热门文章