jquery操作CSS的方法

liu_l 发布于 2014/07/16 22:54
阅读 3K+
收藏 1
是这样,我在CSS里面对a做了如下定义:
.pinpai ul li a{
text-decoration: none;
color: #FF0000;
}
我现在想使用jquery的click事件,点一个东西,改变a的颜色,我一开始是这样想的,
点击的时候给a用addClass("qiangdiao"),给他增加一个名为qiangdiao的class
内容为:.qiangdiao{color: #000;}
但是这种方式实现不了,我估计是因为相当于同时给a引用了两个class属性所以被覆盖了。

我又用了另一种方法.css('color', '#000');
这样不是相当于写style{color:#000}嘛,优先级比引用css要高,所以这种方法能实现。

我现在想问的是 jquery能不能修改css里定义的属性? 也就是第一种方法能不能通过某种方式实现?

以下是问题补充:

@liu_l:问题已经解决,此话题终结。 解决方法为iSea君最先提供。 ps:在调试时发现,选择器必须获取到a元素,即$('ul li a')的时候 .pinpai ul li a{ text-decoration: none; color: #FF0000; } .pinpai ul li a.qiangdiao{ color: #000000; } 才能实现效果。 感谢iSea以及诸君。 (2014/07/17 15:04)
加载中
0
iSea
iSea

注意class样式的顺序和优先级,css顺序如下写应该是没问题的

.pinpai ul li a{ text-decoration: none; color: #FF0000; }

.pinpai ul li a.qiangdiao{ color: #000; }

0
欣儿
欣儿

都可以,表示。

如果CLASS过多,那就考虑把一些换成name属性的

欣儿
欣儿
回复 @liu_l : 不能操作css文件
liu_l
liu_l
我想问问 jquery能直接操作修改css文件吗? 就是说 我不想用.css()这种方式,我想用.addClass()这种方式,这样写起来看着可读性好一些。 还有您的说class过多,会有什么坏影响吗?
0
liu_l
liu_l

引用来自“iSea”的评论

注意class样式的顺序和优先级,css顺序如下写应该是没问题的

.pinpai ul li a{ text-decoration: none; color: #FF0000; }

.pinpai ul li a.qiangdiao{ color: #000; }

这个问题我考虑过了,你看,我在CSS中是这么写的
.pinpai ul li a{
text-decoration: none;
color: #FF0000;
}
.qiangdiao{color: #000;}
对应的jquery代码是这样:
$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass('qiangdiao');
但是在点击click事件后字的颜色还是 #FF0000....
可以的话我可以把demo源码发给你
0
LCore
LCore

首先addClass的方式也是能够成功的,不知道楼主为什么不行?而且一次性修改的css属性过多的话

一般用addClass的方式更好吧,当然类似于下面写法也行:


$xxx.css({
        'border':'1px solid red',
        'color':'blue'
    });

使用addClass方式实现你的要求:

<html>
<head>
	<script src="js/jquery-1.9.1.js"></script>
    <style>
        a {
            text-decoration: none;
            color: #FF0000;
        }
         .change {
            color: #000000;
        }
    </style>
    <script>
        $(function() {
            $('#button').on('click', function() {
                $('#aa').addClass('change');
                console.info("TEST");
            });

        });
    </script>
</head>

<body>
    <a id="aa">开源中国</a>	
    <button id="button">点击</button>
</body>
</html>




0
liu_l
liu_l

引用来自“LCore”的评论

首先addClass的方式也是能够成功的,不知道楼主为什么不行?而且一次性修改的css属性过多的话

一般用addClass的方式更好吧,当然类似于下面写法也行:


$xxx.css({
        'border':'1px solid red',
        'color':'blue'
    });

使用addClass方式实现你的要求:

<html>
<head>
	<script src="js/jquery-1.9.1.js"></script>
    <style>
        a {
            text-decoration: none;
            color: #FF0000;
        }
         .change {
            color: #000000;
        }
    </style>
    <script>
        $(function() {
            $('#button').on('click', function() {
                $('#aa').addClass('change');
                console.info("TEST");
            });

        });
    </script>
</head>

<body>
    <a id="aa">开源中国</a>	
    <button id="button">点击</button>
</body>
</html>




我把源码贴出来了,挺简单的,您帮着看下,我实在是看不出有什么问题,就是不行啊...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>结构和样式</title>
	<!-- <link rel="stylesheet" href="default.css" /> -->
<style>
*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 14px;
}
.center{
	margin: 0 auto;
}
 .clearfix:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix {
	*zoom:1;
}
.pinpai{
	width: 450px;
	margin-top: 40px;
}
.pinpai ul li{
	/*font-style font-variant font-weight font-size line-height font-family*/
	font: italic normal normal 14px/30px "宋体",Arial;
	text-align: center;
	width: 150px;
	height: 30px;
	float: left;
	display: block;
	list-style-type: none;
}
.pinpai ul li a{
	text-decoration: none;
	color: #FF0000;
}
.qiangdiao a{
	color: #000000;
}
.pinpai ul li a:hover{
	color: #34D140;
}
.more{
	width:135px;
	height:25px;
	line-height:25px;
	border: 1px solid #aaa;
	text-align: center;
}
.more a{
	text-decoration: none;
}
.more span{
	padding-left:15px;
	background: url(img/down.gif) no-repeat 0 50%;
}
</style>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		var $jingjian=$(".pinpai li:gt(5):not(:last)" );
		$jingjian.hide();
		var $btn = $('.more a');

		$btn.click(function() {
			 if($jingjian.is(':hidden')){
				$jingjian.show('1000');
				$(this).find('span').css('background', 'url(img/up.gif) no-repeat 0 50%')
								    .text('精简部分品牌');
				/*此部分addClass不能成功*/
				$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass('qiangdiao');
				// $('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").css('color', '#000');
			}
			else{
				$jingjian.hide('1000');
				$(this).find('span').css('background', 'url(img/down.gif) no-repeat 0 50%')
						  			.text('显示全部品牌');
				$('ul li').removeClass('qiangdiao');
			}
			 return false;
			})
	})
	</script>
</head>
<body>
<div class="pinpai center clearfix">
	<ul>
		<li><a href="#">佳能</a></li>
		<li><a href="#">索尼</a></li>
		<li><a href="#">三星</a></li>
		<li><a href="#">尼康</a></li>
		<li><a href="#">松下</a></li>
		<li><a href="#">卡西欧</a></li>
		<li><a href="#">富士</a></li>
		<li><a href="#">柯达</a></li>
		<li><a href="#">宾得</a></li>
		<li><a href="#">理光</a></li>
		<li><a href="#">奥林巴斯</a></li>
		<li><a href="#">明基</a></li>
		<li><a href="#">爱国者</a></li>
		<li><a href="#">其他品牌</a></li>
	</ul>
</div>
<br /><br />
<div class="more center"><a href="#"><span>显示全部品牌</span></a></div>
</body>
</html>



0
fei_zheng
fei_zheng

.qiangdiao{color: #000 !important;} 

这样定义一般就无敌了吧。。

0
laichendong
laichendong
  1. jQuery不能操作css文件
  2. 你最初的实现没问题。之所以看不到效果,你分析得也对。就是被覆盖了。(遗憾的是你后面的想法以及部分回答者把你带沟里去了)。css是有层级关系的。选择器也是有权重的。所以才会有覆盖,这也是css的精髓所在。建议google一下“css 选择器  权重”了解相关内容。
  3. @iSea是正解!
0
L3ve
L3ve

要不然就用JavaScript修改css呗... getComputedStyle,自己查下...

其实修改class的优先级比较好

ps:楼上正解

0
张攀
张攀

引用来自“iSea”的评论

注意class样式的顺序和优先级,css顺序如下写应该是没问题的

.pinpai ul li a{ text-decoration: none; color: #FF0000; }

.pinpai ul li a.qiangdiao{ color: #000; }

引用来自“liu_l”的评论

这个问题我考虑过了,你看,我在CSS中是这么写的
.pinpai ul li a{
text-decoration: none;
color: #FF0000;
}
.qiangdiao{color: #000;}
对应的jquery代码是这样:
$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass('qiangdiao');
但是在点击click事件后字的颜色还是 #FF0000....
可以的话我可以把demo源码发给你

是你定义css的优先级出问题了。.qingdao 的范围比.pinpai ul li a的范围大,所以他即使在后面也无法覆盖掉他的样式,建议使用iSea的样式,妥妥的。

0
Abson_Jack
Abson_Jack

元素上的style” > “文件头上的style元素” >“外部样式文件

需要指定优先级,在color : #000000 后面添加 !important

返回顶部
顶部