读jQuery官方文档：样式

样式

使用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();

转载于:https://www.cnblogs.com/lozio/p/4847639.html