读jQuery官方文档:样式

时间:2024-05-22 21:05:56

样式

使用jQuery,无论是设置或者获取元素样式都十分简便。

// 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式)
$('h1').css('fontSize');
$('h1').css('font-size');
//设置样式
$('h1').css('fontSize', '100px');
//设置多个样式
$('h1').css({
fontSize: '100px',
color: 'red'
});

其实设置多个元素时,给.css()传入的参数是一个对象,也可以这样:

var options = {
fontSize: '100px',
color: 'red'
};
$('h1').css(options);

客户端分为三层:

  • HTML-结构层
  • CSS-表现层
  • JavaScript-行为层

通常来说,建议使用.css()只用来获取样式,而不用来设置样式。因为使用.css()来设置样式破坏了客户端的三层结构,即在行为层混合了表现层的代码。

最好是定义一系列的CSS类,然后用jQuery给元素增加删除CSS类:

var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big'); if ($h1.hasClass('big')) {
//do something...
}

另外,也可以用jQuery来调整元素的尺寸、位置

//设置
$('h1').width('80px'); //获取
var width = $('h1').width(); //80 //获取位置, 返回一个包含元素位置信息的对象
$('h1').position();