JQuery设置CSS

浏览数：28 / 时间：2015年06月09日

JQuery是如此的强大，可以非常方便地设置CSS样式和属性。

样式操作

//获取样式
var p_class=$(‘p‘).attr(‘class‘);
//设置样式。(直接修改class属性，会替换掉已有的样式)
$(‘p‘).attr(‘class‘,‘myClass‘);
//追加样式
$(‘p‘).addClass(‘myClass‘);
//移除样式
$(‘p‘).removeClass(‘myClass‘);
//切换样式。具体来说就是，如果有这个样式，就removeClass，如果没有，就addClass
$(‘p‘).toggleClass(‘myClass‘);
//判断是否具有某个样式
if($(‘p‘).hasClass(‘myClass‘)){} //hasClass(‘myClass‘)等同于isClass(‘.myClass‘)

CSS-DOM操作

上面的函数是对class进行操作的，下面来个更直接的，直接到CSS属性

//获取选中元素的某个属性值
$(‘p‘).css(‘color‘);
//设置选中元素的某个属性值
$(‘p‘).css(‘color‘,‘red‘);
//一次性设置多个属性值
$(‘p‘).css({color:‘red‘,‘fontSize‘:‘30px‘});

下面是几个特殊的函数

//获取宽和高
$(‘p‘).width();
$(‘p‘).height();
//设置宽和高
$(‘p‘).width(‘200px‘);
$(‘p‘).height(‘40px‘);

//offset()函数获取元素在当前视窗的偏移量
var offset=$(‘p‘).offset();
var left = offset.left;
var top = offset.top;