当前位置: 首页 > 编程笔记 >

基于jquery animate操作css样式属性小结

柯唯
2023-03-14
本文向大家介绍基于jquery animate操作css样式属性小结,包括了基于jquery animate操作css样式属性小结的使用技巧和注意事项,需要的朋友参考一下

昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的。不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等。

css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性:

 * backgroundPosition
  * borderWidth
  * borderBottomWidth
  * borderLeftWidth
  * borderRightWidth
  * borderTopWidth
  * borderSpacing
  * margin
  * marginBottom
  * marginLeft
  * marginRight
  * marginTop
  * outlineWidth
  * padding
  * paddingBottom
  * paddingLeft
  * paddingRight
  * paddingTop
  * height
  * width
  * maxHeight
  * maxWidth
  * minHeight
  * maxWidth
  * font
  * fontSize(在animate函数的css参数指定并不同于标准css属性,例如这个css标准是:font-size。同理上面很多也是这样的情况)
  * bottom
  * left
  * right
  * top
  * letterSpacing
  * wordSpacing
  * lineHeight
  * textIndent
  * opacity

记住这些可以玩动画的哦~~

jquery的animate()方法也可设置非css属性

如题,举例:

$('body').animate({scrollTop:0}, 1500);
$("body").animate({scrollTop:"-="+50},350);

还有其他的几个小例子:

禁用元素

$('button').attr('disabled', 'disabled'); 
$('button').removeAttr('disabled');

遍历元素集合:

$("input:text").each(function(index){ 
  alert(index);//循环的下标值,从0开始 
  alert(this.value);//自带属性可以用this(Dom)直接取值 
  alert($(this).attr("type"));//自定义属性需要用attr()取值 
});
 类似资料:
  • 本文向大家介绍jQuery操作属性和样式详解,包括了jQuery操作属性和样式详解的使用技巧和注意事项,需要的朋友参考一下 • 区分 DOM 属性和元素属性 通常开发人员习惯将id,src,alt等叫做这个元素的"属性"。我们将其称为"元素属性"。但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象", 并且将元素的"元素属性"存储为"DOM 属性",两者是有区别的。 甚至

  • 本文向大家介绍JQuery操作元素的css样式,包括了JQuery操作元素的css样式的使用技巧和注意事项,需要的朋友参考一下 我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能, 虽然它们和传统

  • 我正在尝试取消缩放/取消合并我的CSS样式。我有一个style.css文件,里面有很多合并的样式,比如: 我试图把它转换成的是: 我如何取消合并缩小的css样式以获得这样的输出?我已经尝试了几个CSS美化器和缩小器,但它们并不完全是我所需要的。 UPD:这里是解决方案:codeBeautifier.com。要获得与上面示例相同的输出,请打开此页面,找到,将其设置为,粘贴您的CSS,然后点击

  • 本文向大家介绍基于Cookie常用操作以及属性介绍,包括了基于Cookie常用操作以及属性介绍的使用技巧和注意事项,需要的朋友参考一下 概述 最近项目要用到cookie存储部分用户信息;研究了一下做一下分享 Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。 设置cookie存储 注意 设置cooki

  • 本文向大家介绍基于js对象,操作属性、方法详解,包括了基于js对象,操作属性、方法详解的使用技巧和注意事项,需要的朋友参考一下 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类、Hashtable类等等。 目前在Javascript中,已经存在一些标准的类,例如Date、Array、RegExp、St

  • 样式操作 通过 JavaScript 动态修改页面样式。 CSS 对应 DOM 对象 <link rel="stylesheet" type="text/css" href="sample.css"> // var element = document.querySelector('link'); // 对应于 element.sheet <style type="text/css" media