你的位置:首页 > Java教程

[Java教程]DOM样式操作

元素style属性的定义

  任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是cssStyleDeclaration的实例,包含着通过HTML的style特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style特性中指定的任何 CSS属性都将表现为这个style对象的相应属性。对于使用中划线的CSS属性名,必须将其转换成驼峰大小写形式,才能通过JavaScript访问。多数情况下都可以通过简单地转换属性名的格式来实现,但其中一个不能直接转换的CSS属性是float。因为,float是JavaScript中的保留字,不能用作属性名。

  [注意]IE8-浏览器不支持属性名cssFloat,IE浏览器支持属性styleFloat,所有浏览器都支持float属性

<div class="box" id="box">123</div><script>var oBox = document.getElementById('box');//IE8-浏览器不支持该属性oBox.style.cssFloat = 'right';//IE浏览器支持该属性oBox.style.styleFloat = 'right';//所有浏览器都兼容oBox.style.float = 'right';</script>

 

元素style属性的属性和方法 

  【cssText】

  cssText:通过它能够访问到style特性中的CSS代码。在读模式下,cssText返回浏览器对style特性中CSS代码的内部表示;在写模式中,赋给cssText的值会重写整个style特性的值。设置cssText是为元素应用多项变化最快捷的方法,因为可以一次性应用所有变化。(可读写)

<div class="box" id="box" style="background-color: red;height: 100px; width: 100px;">123</div><script>var oBox = document.getElementById('box');console.log(oBox.style.cssText);//background-color: red;height: 100px; width: 100px;document.onclick = function(){  oBox.style.cssText = "height:40px; width:40px; background-color:blue;";  }</script>

  【item()】

    item():返回给定位置的CSS属性的名称,也可以使用方括号语法。

  【length】

    length:应用给元素的CSS属性的数量。设计length属性的目的是将其与item()方法配套使用,以便迭代在元素中定义的CSS属性。在使用length和item()时,style对象实际上就相当于一个集合(IE8-不支持)

  【getPropertyValue】

    getPropertyValue():返回给定属性的字符串值(IE8-不支持)

  【getPropertyPriority()】

    getPropertyPriority():如果给定的属性使用了!important设置,则返回"important";否则返回空字符串(IE8-不支持)

<div class="box" id="box" style="height: 100px; background-color: red; width: 100px!important;">123</div><script>var oBox = document.getElementById('box');//IE8-浏览器输出undefined,其他浏览器输出3console.log(oBox.style.length);//3//IE9+浏览器输出width,IE8-浏览器输出大写的WIDTH,其他浏览器输出heightconsole.log(oBox.style[0]);  //IE8-浏览器不支持,其他浏览器输出100pxconsole.log(oBox.style.getPropertyValue(oBox.style[0]));//IE8-浏览器不支持,其他浏览器输出空字符串console.log(oBox.style.getPropertyPriority('height'));//IE8-浏览器不支持,其他浏览器输出importantconsole.log(oBox.style.getPropertyPriority('width'));</script>

  【getPropertyCSSValue()】

    getPropertyCSSValue():返回包含两个属性的CSSRule类型,这两个属性分别是cssText和cssValueType。其中cssText属性的值与getPropertyValue()返回的值相同,而cssValueType属性则是一个数值常量,表示值的类型:0表示继承的值,1表示基本的值,2表示值列表,3表示自定义的值。(只有safari支持)

  【parentRule】

    parentRule:表示CSS信息的CSSRule对象(IE不支持)

<div class="box" id="box" style="height: 100px; background-color: red; width: 100px;">123</div><script>var oBox = document.getElementById('box');//只有safari支持,返回一个CSSValue对象,firefox返回null,其他浏览器报错if(typeof oBox.style.getPropertyCSSValue == "function" && oBox.style.getPropertyCSSValue(oBox.style[0]) != null){  console.log(oBox.style.getPropertyCSSValue(oBox.style[0]));  for(var i = 0, len=oBox.style.length; i < len; i++){    var prop = oBox.style[i];    var value = oBox.style.getPropertyCSSValue(prop);    //height:100px(1) background-color:red(1) width:100px(1)    console.log(prop + ":" + value.cssText + "(" + value.cssValueType + ")");  }}//IE浏览器返回undefined,其他浏览器返回nullconsole.log(oBox.style.parentRule);

  【removeProperty()】

    removeProperty():从样式中删除给定属性,并返回被删除属性的属性值(IE8-不支持)

  【setProperty()】

    setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先权标志("important"或一个空字符串)(IE8-不支持)

<div class="box" id="box" style="height: 100px; background-color: red; width: 100px!important;">123</div><script>var oBox = document.getElementById('box');console.log(oBox.style.cssText);//width: 100px !important; height: 100px; background-color: red;//IE8-浏览器不支持,其他浏览器返回100pxconsole.log(oBox.style.removeProperty('height'));console.log(oBox.style.cssText);//width: 100px !important; background-color: red;//IE8-浏览器不支持,其他浏览器返回undefinedconsole.log(oBox.style.setProperty('width','20px',''))console.log(oBox.style.cssText);//width: 20px; background-color: red;//IE8-浏览器不支持,其他浏览器返回undefinedconsole.log(oBox.style.setProperty('background-color','blue','important'))console.log(oBox.style.cssText);//background-color: blue ! important; width: 20px;</script>  

 

计算的样式

  【getComputedStyle()】

    getComputedStyle()方法接收两个参数:要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息,第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式(IE8-浏览器不支持)

    [注意1]对于font/background/border等复合样式,各浏览器处理不一样。chrome和opera会返回整个复合样式,而IE9+、firefox和safari则什么都不输出
    [注意2]不论以什么格式设置颜色,浏览器都以rgb()或rgba()的形式输出
    [注意3]所有计算的样式都是只读的,不能修改计算后样式对象中的CSS属性
    [注意4]若不需要伪元素信息,该方法有多种省略写法,以获取div的width信息为例
      [a]document.defaultView.getComputedStyle(div,null).width
      [b]document.defaultView.getComputedStyle(div).width
      [c]window.getComputedStyle(div).width
      [d]getComputedStyle(div).width(这种写法最简单)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{  font: 12px/20px "宋体";  height: 20px !important;}a{  display: inline-block;  height: 100px;  width: 100px;  background: blue;  color: white;  border: 1px solid black;}a:after{  content:"伪元素";  color: orange;}</style></head><body><div class="box" id="box" style="height: 100px; background: red; width: 100px;">div</div><a class="link" id="link">link</a><script>var oBox = document.getElementById("box");var oLink = document.getElementById("link");//IE8-浏览器不支持console.log(window.getComputedStyle(oBox,null).height);//20px//(chrome/opera)normal normal normal normal 12px / 20px 宋体//(IE9+/safari/firefox)什么都没输出console.log(document.defaultView.getComputedStyle(oBox,null).font);//(chrome/opera)1px solid rgb(0, 0, 0)//(IE9+/safari/firefox)什么都没输出console.log(getComputedStyle(oLink).border);//(chrome/opera)rgb(0, 0, 255) none repeat scroll 0% 0% / auto padding-box border-box//(IE9+/safari/firefox)什么都没输出console.log(getComputedStyle(oLink).background);//所有浏览器都输出rgb(255, 165, 0)console.log(getComputedStyle(oLink,":after").color)//所有浏览器都输出visibleconsole.log(getComputedStyle(oLink,":after").visibility)//该方法只读不可写,如强行写值会报错//getComputedStyle(oLink,":after").visibility = "hidden";</script></body>  </html>  

 

  【currentStyle】

    虽然IE8-浏览器不支持getComputedStyle()方法,但在IE中每个具有style属性的元素还有一个currentStyle属性,这个属性是CSSStyleDeclaration的实例,包含当前元素全部计算后的样式。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{  font: 12px/20px "宋体";  height: 20px !important;}</style></head><body><div class="box" id="box" style="height: 100px; background: red; width: 100px;">div</div><script>var oBox = document.getElementById("box");console.log(oBox.currentStyle.height);//20px//IE8-浏览器输出undefined,而IE9+浏览器什么都不输出console.log(oBox.currentStyle.font);console.log(oBox.currentStyle.position)//static</script></body>  </html>

  

  兼容写法如下:

function getCSS(obj,style){  if(window.getComputedStyle){    return getComputedStyle(obj)[style];  }  return obj.currentStyle[style];}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{  font: 12px/20px "宋体";  height: 20px !important;}</style></head><body><div class="box" id="box" style="height: 100px; background: red; width: 100px;">div</div><script>var oBox = document.getElementById("box");function getCSS(obj,style){  if(window.getComputedStyle){    return getComputedStyle(obj)[style];  }  return obj.currentStyle[style];}console.log(getCSS(oBox,"height"));//20px</script></body>  </html>    

 

操作样式表CSSStyleSheet    

  CSSStyleSheet类型表示的是样式表,包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。CSSStyleSheet对象是只读的(属性disabled例外)。

【继承属性】

  【length】
    表示有多少样式表,外部样式表中一个<link>算一个,内部样式表中一个<style></style>算一个。
  【item()】
    表示第几个样式表,也可以使用方括号法。item()方法中序号的顺序与在解析页面的顺序一致
  【href】
    如果样式表是通过<link>包含的外部样式表,则表示样式表的URL,否则为null
  【disabled】
    表示样式表是否被禁用的布尔值。这个属性值可读写,将这个值设置为true则可以禁用样式表
  【media】
    表示当前样式表支持的所有媒体类型的集合,在IE8-浏览器中输出media特性值的字符串
  【ownerNode】(IE8-不支持)
    表示拥有当前样式表的指针,返回<link>或<style>元素对象
  【parentStyleSheet】
    在当前样式表是通过@import导入的情况下,这个属性是一个指向导入它的样式表的指针,否则为null
  【title】
    ownerNode中title属性的值
  【type】(IE8-不支持)
    表示样式表类型的字符串,对于CSS样式表而言,这个字符串是"text/css"

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css" media = "all" title="sheet1"><title>Document</title><style>@import url(sheet2.css);body{  height: 100px;  border: 10px solid black;}</style></head><body><script>//因为有外部和内部样式表各1个,所以结果为2console.log(document.styleSheets.length);//2//因为<link>标签在<style>标签上面,所以外部样式表为第0个var oOut = document.styleSheets.item(0);//内部样式表为第1个var oIn = document.styleSheets[1];//disabled属性默认为falseconsole.log(oOut.disabled);//false//若设置disabled为true,则禁用样式表console.log(oOut.disabled = true);//true//外部样式表显示URLconsole.log(oOut.href);//sheet1.css//IE8-浏览器什么都不输出,其他浏览器输出nullconsole.log(oIn.href);//null//IE8-浏览器输出字符串"all",其他浏览器输出一个MediaList对象,第0项为allconsole.log(oOut.media);//IE8-浏览器什么都不输出,其他浏览器输出一个MediaList对象,第0项为undifinedconsole.log(oIn.media);//IE8-返回undefined,其他浏览器输出<link>console.log(oOut.ownerNode);//IE8-返回undefined,其他浏览器输出<style>console.log(oIn.ownerNode);//nullconsole.log(oOut.parentStyleSheet);//nullconsole.log(oIn.parentStyleSheet);//sheet1console.log(oOut.title);//IE浏览器什么都不输出,其他浏览器输出nullconsole.log(oIn.title);//text/css,IE8-浏览器下什么都不输出console.log(oOut.type);//text/css,IE8-浏览器下什么都不输出console.log(oIn.type);</script></body>  </html>  

 

【自有属性和方法】
  【cssRules】(IE8-浏览器不支持)
    表示样式表中包含的样式规则的集合
  【rules】(firefox不支持)
    表示样式表中包含折样式规则的集合
    [注意]对于rules属性IE8-浏览器不识别@import
  兼容写法如下:

function rules(sheet){  return sheet.cssRules || sheet.rules;}  

  【ownerRule】(IE8-浏览器不支持)
    如果样式表是通过@import导入的,这个属性就是一个指针,指向表示导入的规则;否则为null
  【deleteRule()】(IE8-浏览器不支持)
    deleteRule(index)方法删除cssRules集合中指定位置的规则,无返回值
  【removeRule()】(firefox不支持)
    removeRule(index)方法删除cssRules集合中指定位置的规则,无返回值
  兼容写法如下:

function deleteRule(sheet,index){  (typeof sheet.deleteRule == "function")? sheet.deleteRule(index) : sheet.removeRule(index);}  

  【insertRule()】(IE8-浏览器不支持)
    insertRule(rule,index)方法表示向cssRules集合中指定的位置插入rule字符串,并返回当前样式表的索引值
  【addRule()】(firefox不支持)
    addRule(ruleKey,ruleValue,index)方法表示向cssRules集合中指定的位置插入rule字符串,并返回-1
  兼容写法如下:

function insertRule(sheet,ruleKey,ruleValue,index){  return sheet.insertRule ? sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);}  

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css" media = "all" title="sheet1"><title>Document</title><style>@import url(sheet2.css);body{  height: 100px;  border: 10px solid black;}</style></head><body><script>//因为有外部和内部样式表各1个,所以结果为2console.log(document.styleSheets.length);//2//因为<link>标签在<style>标签上面,所以外部样式表为第0个var oOut = document.styleSheets.item(0);//内部样式表为第1个var oIn = document.styleSheets[1];//nullconsole.log(oOut.cssRules);//返回一个CSSRuleList对象console.log(oIn.cssRules);//nullconsole.log(oOut.rules);//返回一个CSSRuleList对象console.log(oIn.rules);//nullconsole.log(oOut.ownerRule);//nullconsole.log(oIn.ownerRule);//undefined//console.log(oOut.deleteRule(0));//undefined//console.log(oIn.deleteRule(1));//undefined//console.log(oOut.removeRule(0));//undefined//console.log(oIn.removeRule(0));//0console.log(oOut.insertRule("body{margin: 20px}",0));//1console.log(oIn.insertRule("body{margin: 20px}",1));//-1console.log(oOut.addRule('body',"margin: 30px"));//-1console.log(oIn.addRule('body','margin: 30px'));</script></body>  </html>

 

CSSStyleSheet对象

  【sheet】(IE8-不支持)
    <link>元素对象和<style>元素对象都有一个sheet属性,保存着与document.styleSheets集合中的样式表相同的对象
  【styleSheet】(IE10-支持)
    <link>元素对象和<style>元素对象都有一个styleSheet属性,保存着与document.styleSheets集合中的样式表相同的对象
  兼容写法为:

function getSheet(element){  return element.sheet || element.styleSheet;}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css" media = "all" title="sheet1"><title>Document</title><style>@import url(sheet2.css);body{  height: 100px;  border: 10px solid black;}</style></head><body><script>var oOut = document.styleSheets[0];var oIn = document.styleSheets[1];var oLink = document.getElementsByTagName('link')[0];var oStyle = document.getElementsByTagName('style')[0];function getSheet(element){  return element.sheet || element.styleSheet;}//CSSStyleSheet {} trueconsole.log(getSheet(oLink),getSheet(oLink) == oOut);//CSSStyleSheet {} trueconsole.log(getSheet(oStyle),getSheet(oStyle) == oIn);</script></body>  </html>  

 

CSSStyleRule对象

  CSSRule对象表示样式表中的每一条规则。实际上,CSSRule是一个供其他多种类型继承的基类型,其中最常见的就是CSSStyleRule类型,表示样式信息。CSSStyleRule对象包含下列属性。

  【selectorText】
    返回当前规则的选择符文本
  【style】
    一个CSSStyleDeclaration对象,通过它设置和取得规则中特定的样式值
  【cssText】(IE8-不支持)
    返回整条规则对应的文本。该cssText属性与style.cssText属性相似,但不相同。前者包含选择符文本和围绕样式信息的花括号,而后者只包含样式信息,类似于元素的style.cssText
  【parentRule】(IE8-不支持)
    如果当前规则是导入的规则,这个属性引用的就是导入规则;否则,这个值为null
  【parentStyleSheet】(IE8-不支持)
    当前规则所属的样式表
  【type】(IE8-不支持)
    表示规则类型的常量值,对于样式规则,这个值是1。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css" media = "all" title="sheet1"><title>Document</title><style>@import url(sheet2.css);body{  height: 100px;  border: 10px solid black;}</style></head><body><script>var oOut = document.styleSheets[0];var oIn = document.styleSheets[1];var oLink = document.getElementsByTagName('link')[0];var oStyle = document.getElementsByTagName('style')[0];function rules(sheet){  return sheet.cssRules || sheet.rules;}//取得内部样式表CSSStyleRule对象var oInRule = rules(oIn)[1] || rules(oIn)[0];//bodyconsole.log(oInRule.selectorText);//body { height: 100px; border: 10px solid black; },IE8-浏览器返回undefinedconsole.log(oInRule.cssText);//height: 100px; border: 10px solid black;IE8-浏览器输出的样式名为大写,且复合属性被拆分。console.log(oInRule.style.cssText);//null,IE8-浏览器返回undefinedconsole.log(oInRule.parentRule);//CSSStyleSheet对象,IE8-浏览器返回undefinedconsole.log(oInRule.parentStyleSheet);//1,IE8-浏览器返回undefinedconsole.log(oInRule.type);//CSSStyleDeclaration对象console.log(oInRule.style);console.log(oInRule.style.border);//10px solid blackconsole.log(oInRule.style.height);//100pxoInRule.style.height = "200px";</script></body>  </html>