jQuery的属性与样式之样式操作.css()

.css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性

获取:

  1. .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值
  2. .css( propertyNames ):传递一组数组,返回一个对象结果

设置:

  1.  .css(propertyName, value ):设置CSS
  2. .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理
  3. .css( properties ):可以传一个对象,同时设置多个样式

注意事项:

  1. 浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px
  2. .css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理
  3. 当一个数只被作为值(value)的时候, jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,例如 .css("width",50}) 与 .css("width","50px"})一样
  4. .addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上通过
  5. .css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的(通过.css方法设置的样式属性优先级要高于.addClass方法)
时间: 2024-10-05 20:09:13

jQuery的属性与样式之样式操作.css()的相关文章

jQuery的属性、遍历和HTML操作

一.属性操作   1..attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主要有3个,getAttribute方法. setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说.而在jQuery中用一个 attr()与removeAttr()就可以全部搞定了,包括兼容问题 jQuer

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

JQuery属性与样式——样式操作.css()和元素数据的存储.data()

样式操作.css()和元素数据的存储.data() 1   .css()方法用于获取元素样式属性的计算值或者设置元素的css属性 2   .css()获取元素样式属性的计算值的2种方法 .css(propertyName)获取匹配元素集合中的第一个元素的样式属性的计算值 .css(propertyNames)传递一组数组,返回一个对象结果 3    .css()设置元素的css属性的3种方法 .css(propertyName,value)设置css .css(propertyName,func

JQuery元素属性和样式操作、以及设置元素和内容

一.JQury元素属性操作通过JQuery可以对元素本身的属性进行操作,包括获取属性的属性值,设置属性的属性值,并且可以删除属性值(attr()和removeAttr()).二.JQuery样式操作元素样式操作包括了:直接设置css样式.增加css样式.类别切换.删除类别.例如:$('div').css('color');//获取元素行内的css样式颜色.$('div').css('color'. 'pink');//设置我最喜欢的粉色.var box = $('div').css(['colo

【jQuery】:DOM的属性、内容、样式操作

目录 一.内容操作 1.html() 2.text() 3.val() 二.属性操作 1.获取与设置属性 2.删除属性 三.样式操作 1.追加样式 2.设置样式 3.移除样式 4.切换样式 5.判断是否含有样式 四.样式操作CSS补充 1.设置样式 2.获取样式 一.内容操作 1.html() 与JS中的interHTML属性类似,用以读取或者设置某个元素的HTML内容. <p><span>城市</span></p> //获取p元素的HTML内容:<s

JQuery中操作css样式

//1.获取和设置样式  $("#tow").attr("class")获取ID为tow的class属性  $("#two").attr("class","divClass")设置Id为two的class属性.  //2.追加样式  $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2  //3.移除样式  $(

jQuery的属性及样式

1jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的DOM方法主要有3个,getAttribute方法.setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说.而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题 jQue

jquery轻松操作CSS样式

$(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”);  }else{    $(this).addClass(“zxx_fri_on”);  }  return false;});   添加或去除元素集合的class name 1. 使用addClass()方法 addClass(names) 添加names指定的一个或多个class name给wr

jquery操作CSS样式全记录

$(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”);  }else{    $(this).addClass(“zxx_fri_on”);  }  return false;});   添加或去除元素集合的class name 1. 使用addClass()方法 addClass(names) 添加names指定的一个或多个class name给wr

jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: addClass(value) ;为匹配元素集合中的每个元素添加一个或多个类样式,通过修改DOM属性className来修改类样式,value可以是个以空格分隔的类样式或者一个函数(返回一个或多个以空格分隔的类样式) hasClass(selector)   ;检测匹配元素中的任意元素是否含有指定的类