您的位置：首页 > Web前端 > JQuery

使用jQuery操作CSS

2013-07-28 17:00 459 查看

<一、Style对象>

Style对象包含每个与CSS样式对应的属性，但是它们的名称略有不同。对于单个单词的CSS样式来说，Style对象以相同的属性名称来表示对应的CSS属性。但CSS中很多属性都是复合名，即使用连字符连接多个单词，但在脚本中，不能使用连字符，因为它被定义为减号，所以要去掉连字符，然后将属性名称的第二个首字母大写。另外，JavaScript虽然没有把float作为关键字，但为了备用而把它作为保留字，禁止用户使用。为了解决这个问题，CSS2Properties对象在float属性前增加了css前缀，即使用cssFloat名来表示脚本中的float属性。

<二、读写行内样式>（以下e表示Element对象，即元素）

1.读取样式的属性：

var value = e.style.getPropertyValue(propertyName);

2.读取样式的属性：

var name = e.Style.item(index);

【其中，index是CSS索引号】

3.设置样式的属性值：

e.Style.setProperty(propertyName,value,priority);

【propertyName表示CSS属性名，value表示CSS属性值，priority表示是否为该声明设置!important命令，如果不设置可以空着("")】

4.移除样式声明：

e.style.removeProperty(propertyName);

【propertyName表示属性名】

5.检测声明中是否附加!important关键字：getPropertyPriority()方法能够获取指定的CSS属性中是否附加了!important优先级命令，如果存在，则返回important字符串，否则返回空字符串。

<三、styleSheets集合>

要获取定义类的样式表的引用，可以使用document.styleSheets集合来实现，该集合中包含了所有样式表的引用，如所有style标签定义的内部样式表的引用，以及使用link元素或@import命令导入的外部样式表。由于styleSheets是集合，因此可以使用下标来读取每个样式表对象，它们的下标从0开始，按照document文档中的书写顺序来排列。注意：Opera浏览器不支持styleSheets对象，Safari部分支持styleSheets对象，它不能够访问rel属性值为alternate
stylesheet的禁用样式表。

同时，DOM还为每个样式表定义了一个cssRules集合，用来包含指定样式表中的所有规则（样式）。但是IE不支持该集合，它预定义了rules集合来表示样式表中的规则。以下是styleSheets的用法，包含不同浏览器之间的兼容：

<head>
<title></title>
<style type="text/css">
#box
{
width:100px;
height:100px;
background-color:Red;
border:solid 50px blue;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//判断浏览器的类型
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//调用cssRules集合中的border属性
alert(cssRules[0].style.border);
</script>
</head>
<body>
<div id="box"></div>
</body>

selectorText属性：用于获取指定样式的选择符，即css选择器的名称，用法示例：cssRules[0].selectorText = "#box"

styleSheet.length属性：用于获取样式表中包含样式的个数

IE浏览器支持的增加样式方法：

styleSheet.addRules(selector,style,index);

【styleSheet表示引用指针，参数selector表示样式选择符，style表示具体的声明，index表示新建样式在样式表中的索引位置，默认为-1，表示位于样式表的末尾，该参数可以不设置】

FF浏览器支持的增加样式方法：

styleSheet.insertRule(rule,index]);

【rule是一个完整的样式字符串，而参数index与addRule()方法中的index参数相同，但该参数必须设置，默认为0，即放在样式表的末尾。】

IE支持访问最终样式的方法：使用currentStyle对象获取当前元素最终显示了哪些样式，用法示例：alert("背景色："+e.currentStyle.backgroundColor);

DOM支持访问最终样式的方法：使用getComputedStyle()方法，该方法需要在document.defaultView对象中访问，它包含了两个参数，第一个参数用来设置或获取当前元素的样式，第二个参数表示显示位置和样式。用法示例：alert("背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor);<>

<四、动态效果>

1.show()：使元素显示。如果style对象的display属性值设置为none使元素隐藏，使用这个方法后，display属性声明将被清空

2.hide()：使元素隐藏

以上两个方法除了简单的显示和隐藏外，还可以设置参数，第一个参数表示动画时长的毫秒数值，第二个参数是可选参数，表示动画在演示完毕要调用的函数。可以使用闭包函数设计出元素的折叠效果和tab选项卡效果。其实像这种显隐切换，可以使用jQuery封装的toggle()方法来实现，它能够切换元素的可见状态。toggle()方法还可以接受多个参数，如果传入布尔值，则可以设置元素的显示或隐藏，true表示显示，false表示隐藏。

3.slideDown()：向下滑动，相当于缓慢舒展元素对象

4.slideUp()：向上滑动，相当于缓慢收缩元素对象

以上两个方法可以设置元素的滑动显隐效果，slideDown()方法作用于隐藏元素，slideUp()方法作用于显示元素。它们还可以包含两个可选参数，第一个参数设置滑动的速度，可以设置预定义的字符串，如“slow”、“normal”、“fast”，或者传递一个数值，表示动画时长的毫秒数。第二个参数表示一个回调函数，当动画完成后，将调用该回调函数。另外，也可以使用jQuery设计的滑动显隐切换的方法slideToggle()，它可以在滑动中显示或隐藏元素。

5.fadeIn()：设置匹配元素的淡入效果

6.fadeOut()：设置匹配元素的淡出效果

以上两个方法能够实现元素的渐隐渐显的动态效果，它们都可以包含两个可选参数。第一个参数表示动画持续时间，以毫秒为单位。第二个参数为回调函数，是可选参数，用来在动画演示完毕之后被调用。例如，可以在fadeIn()的回调函数中使用fadeOut()方法，这样可以设置元素的淡入淡出效果。

7.fadeTo()：设置元素的透明度

该方法能够把所有匹配元素的不透明度以渐进的方式调整到指定的不透明度，并在动画完成后可选的触发一个回调函数。该方法的第一个参数用来指定动画演示时间，第二个参数表示元素要调整到的不透明度，取值范围是0到1之间的数字，第三个参数为可选的回调函数。fadeTo()方法仅能够作用于显示的元素，对隐藏起来的元素是无效的。

<五、自定义动画>

1.animate()：jQuery使用animate()方法创建个自定义动画，该方法的关键在于指定动画的形式和动画结果样式属性的对象。animate()方法包含四个参数。第一个参数是一组包含作为动画属性和终值的样式属性及其值的集合，形式类似于以下代码：

{
width:"90%",
height:"100%",
fontSize:"10em"
borderWidth:10
}

如果属性值是一个数值，样式属性就会从当前的值渐变到指定的值，如果使用的是hide、show、或toggle等特定字符串值，则会为该属性调用默认的动画形式。

第二个参数表示动画持续的时间，以毫秒为单位，也可以设置预定义字符串（"slow"）。在jQuery1.3中，如果第二参数为0，则表示直接完成动画。

第三个参数表示要使用的擦除效果的名称，这是一个可选参数，要使用该参数，需要插件支持，默认jQuery支持linear和swing特效。

第四个参数表示回调函数，表示在动画演示完毕之后，将要调用的函数，也是可选参数。

animate()方法的功能是很强大的，我们可以把第二个及其后面的所有参数都放置在一个对象中，在这个集合对象中包含动画选项的值，然后把这个对象作为第二个参数传递给animate()方法。该参数可以包含以下多个选项：

duration：指定动画演示的持续时间

easing：接受要使用的擦除效果的名称

step：动画演示之后回调值

queue：表示是否使此动画进入动画队列，默认为true

<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>

$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});

2.stop()：停止动画使用stop()方法，它也包含两个可选参数，第一个参数是布尔值，如果设置为true，则清空队列，立即结束所有动画，如果设置为false，则当动画队列中有等待执行的动画时，会立即执行队列后面的动画。第二个参数也是一个布尔值，如果设置为true，则会让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

3.off：此属性用来关闭动画，如果把它设置为true，可以立即关闭所有动画，所有效果会立即执行完毕。

——本文摘自《jQuery开发完全技术宝典》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航