jQuery入门:CSS,样式和大小
来源:互联网 发布:js 监听url 变化事件 编辑:程序博客网 时间:2024/06/05 07:45
jQuery包含了获取和设置元素的CSS属性的简便方法:
//获取CSS属性 $( "h1" ).css( "fontSize" ); // Returns a string such as "19px".返回一个字符串"19px"。 $( "h1" ).css( "font-size" ); // Also works.同样会工作。 // 设置CSS属性。 $( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.设置单独的属性 // 设置多个属性。 $( "h1" ).css({ fontSize: "100px", color: "red" });
注意第二行参数的形式——它是一个包含多重属性的对象。这是传递多重参数到一个函数的常用办法,且很多jQuery设置函数的方法都接受一次性设置多个值的对象。
CSS属性在JavaScript中通常需要将连字号换成驼峰式拼写。例如,CSS属性font-size
被用做Javascript中的一个属性名称的时候,用fontSize
来表示。然而,当用.css()
方法象字符串一样传递一个CSS属性名称的时候,并不会这样应用——在这种情况下,不管是驼峰式拼写还是连字号的形式都将运行。
当用一个对象来设置CSS的时候,CSS属性应该用驼峰式拼写而不应该用一个连字号,但在可生产代码(production-ready code)中,不推荐使用.css()
做为设置函数。
应用CSS classes 设置样式
做为一个获取函数,.css()
方法是很有价值的。然而,在生成就绪的代码中通常会避免将它做为设置函数,因为通常表现的信息最好和JavaScript代码保持分离。相反,用classes写那些描述多种显示形式的CSS规则,然后更换元素的class。
// 用classes工作。 var h1 = $( "h1" ); h1.addClass( "big" ); h1.removeClass( "big" ); h1.toggleClass( "big" ); if ( h1.hasClass( "big" ) ) { ... }
Classes还能够被用来存储关于一个元素的状态信息,例如表明哪个元素被选择。
大小
jQeury提供了丰富的方法用来获取和修饰一个元素的尺寸和定位信息。
下面的代码展示了jQuery中获取元素尺寸大小功能的一个简短概述。如果需要jQuery操作元素尺寸大小方法的全部细节,参见dimensions documentation on api.jquery.com。
// 基础的尺寸大小方法。 //设置所有<h1>元素的宽度。 $( "h1" ).width( "50px" ); //获取第一个<h1>元素的宽度。 $( "h1" ).width(); //设置所有<h1>元素的高度。 $( "h1" ).height( "50px" ); //获取第一个<h1>元素的宽度。 $( "h1" ).height(); // 返回一个对象,包含第一个<h1>相于对于它的“父元素偏移(定位)”的定位信息。 $( "h1" ).position();
原文地址
6 0
- jQuery入门:CSS,样式和大小
- jQuery css样式入门例子
- css样式设置字大小和颜色
- jQuery与属性和css样式
- 【jQuery】jQuery修改class属性和CSS样式
- jquery操作CSS样式
- jQuery操作css样式
- jquery 定义css样式
- Jquery修改CSS样式
- JQuery控制CSS样式
- jQuery控制css样式
- jquery控制css样式
- jquery 样式 css
- JQuery 操作css样式
- jquery 控制css样式
- jquery修改css样式
- jQuery操作css样式
- JQuery添加CSS样式
- POJ---2352-Stars(树状数组)
- JavaSE---IO流(字节流、转换流、字符流)
- HDU 1203 I NEED A OFFER!
- Thirft框架介绍
- spring 定时任务的 执行时间设置规则
- jQuery入门:CSS,样式和大小
- 蛇形矩阵
- 11个高效的VS调试技巧
- 中兴第一次对外发布4G LTE的M2M模块---ESM
- GDB 总结
- Ubuntu更新可用程序列表
- 【基础dp】Piggy-Bank
- Unity3d之Quaternion 学习与应用
- Could not create the view: An unexpected exception was thrown tomcat中 Servlet 错误解决方法