教你js对象删除某个元素 js获取类名的3种方法( 三 )

mydiv.style.removeProperty("background-color");parentRule：只读，表示CSS信息的CSSRule对象；
var rule = mydiv.style.parentRule;console.log(rule);// null计算的样式：
虽然style对象能够提供style特性所有样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的实际样式信息；所以，需要使用计算样式；
计算样式是一组属性值，它由浏览器通过把内联样式结合所有链接样式表中所有可应用的样式规则后导出（计算）得到的，也就是一组在呈现元素时实际使用的属性；
getComputedStyle()方法：
该方法是window对象的方法，可以通过window.getComputedStyle()，或者document.defaultView.getComputedStyle()方法调用，而document.defaultView的返回值就是window；
该方法接受两个参数：要取得计算样式的元素和一个伪元素字符串(如：:after)；如果不需要伪元素，第二个参数可以为null或一个空字符串；该方法返回一个CSSStyleDeclaration对象，与style属性的类型相同，区别在于它是只读的，其中包含当前元素的所有计算的样式；
<style>#mydiv{background-color: purple; width: 100px; height: 100px;}</style><div id="mydiv" style="background: pink; border: 1px solid black;">mydiv</div><script>var mydiv = document.getElementById("mydiv");var computedStyle = document.defaultView.getComputedStyle(mydiv,null);console.log(computedStyle);console.log(computedStyle.backgroundColor);console.log(computedStyle.width);console.log(computedStyle.height);console.log(computedStyle.border);</script>注：以上border属性可能不会返回实际的border规则(如IE和Firefox返回空字符串)，原因是不同浏览中解释复合属性的方式不同，因为设置这种属性实际上会涉及很多其他属性，例如：border，实际上调协了四个边的边框宽度、颜色等，因此border不会返回，但computedStyle.borderleftWidth会返回值；
console.log(computedStyle.borderLeftWidth);console.log(computedStyle.borderLeftColor);另外，不同浏览器表示值的方式可能会有所区别；
计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS属性都会表现在计算后的样式中；如visibility属性都有一个默认值，有些浏览器设置为visible，而有些设置为inherit；
计算样式的CSSStyleDeclaration对象和表示内联样式的对象之间有一些重要的区别：
计算样式的属性是只读的；
计算样式的值是绝对值，类似百分比和点之类的相对的单位将全部转换为绝对值；所有指定尺寸，例如外边距大小和字体大小等属性都有一个以像素为度量单位的值；相关颜色的属性将以”rgb(#,#,#)”或”rgba(#,#,#,#)”的格式返回；
不计算复合属性，它们只基于最基础的属性，例如，不要查询margin属性，应该使用marginLeft或marginTop等；
计算样式的cssText属性未定义（也就是该属性返回空字符串）；
计算样式和内联样式可以同时使用；
// 用指定的因子缩放元素e的文本尺寸function scale(e, factor){// 用计算样式查询当前文本的尺寸var size = parseInt(window.getComputedStyle(e,"").fontSize);// 用内联样式来放大尺寸e.style.fontSize = factor * size + "px";}// 用指定的因子修改元素的背景颜色// factors > 1 颜色变浅，factors < 1颜色变暗function scaleColor(e, factor){var color = window.getComputedStyle(e,"").backgroundColor;var components = color.match(/[\d\.]+/g); // 解析r、g、b分量for(var i=0; i<3; i++){// 循环r,g,bvar x = Number(components[i]) * factor;// 缩放每个值x = Math.round(Math.min(Math.max(x, 0), 255)); // 设置边界并取整components[i] = String(x);}if(components.length == 3)// rgb()颜色e.style.backgroundColor = "rgb(" + components.join() + ")";else// rgba()颜色e.style.backgroundColor = "rgba(" + components.join() + ")";}var mydiv = document.getElementById("mydiv");scale(mydiv, 1.5);scaleColor(mydiv, .5);低版本的IE不支持getComputedStyle()方法，但它有一种类似的概念；在IE中，具有style属性的元素还有一个currentStyle属性，该属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式，但只有IE支持；

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：