jQuery CSS()方法改变现有的CSS样式表

前端技术 2023/09/05 JavaScript

使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜色,可以这样编写代码:

$(\"#61dh a\").css(\'color\',\'#123456\');
//选择器‘$(\"#61dh a\")\'表示ID为‘#61dh\'的元素下的所有链接。
//.css(‘color\',\'#123456\');表示把颜色设为\'#123456\'

如果需要改变多个样式属性,可先定义属性变量,然后直接赋值给css()方法。

var mycss = {
background: \'#EEE\',
width: \'478px\',
margin: \'10px 0 0\',
padding: \'5px 10px\',
border: \'1px solid #CCC\'
};
$(\"#result\").css(divcss);

上述代码先定义了一个CSS样式属性变量“mycss”,类似于建立一个外部CSS文件,之后通过css()方法,把属性赋给ID为\'#result\'的DIV。
另外jQuery提供的css()方法还可以查看某个元素的css属性值。(www.phpstudy.net 脚本学堂)

例如查看链接的颜色,代码如下:

$(\"#61dh a\").css(\"color\")

你会发现,这与第一个例子相似,但是这里只传递一个参数(样式属性)。
最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色),需要用到jQuery事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

$(\"#61dh a\").css(\'color\',\'#123456\');
$(\"#61dh a\").hover(function(){
$(this).css(\'color\',\'#999\');
},
function(){
$(this).css(\'color\',\'#123456\');
});
//hover()方法的两个函数使用用逗号分隔

或许聪明的你已经注意到这种方法称不上简洁,呵呵,其实jQuery hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

本文地址:https://www.stayed.cn/item/14203

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。