JS操作样式style
1、
任何⽀持 style 特性的 HTML 元素在 JavaScript 中都对应着有⼀个 style 属性,指向⼀个 CSSStyleDeclaration 的⼀个实例对象,包含该元素的内嵌style 样式(直接定义在HTML元素上的style)。
对于使⽤短线分割的CSS属性,在JavaScript中转为驼峰式。
⼏个常见的属性:
CSS属性JavaScript属性
background-image style.backgroundImage
lor
display style.display
font-family style.fontFamily
height style.height
width style.width
有⼀个CSS属性--->float,不能直接转换为JavaScript的属性,因为 float 在Javascript中是保留字。在 IE9+,Firefox、Safari、Opera、Chrome 中是cssFloat,在同时所有IE也⽀持 styleFloat 。
var testDiv = ElementById("test");
testDiv.style.backgroundColor = "red"; //所有浏览器都⽀持属性赋值
//testDiv.style.cssFloat = "right"; // IE9+,Firefox、Safari、Opera、Chrome
testDiv.style.styleFloat = "right"; // IE 所有
testDiv.style.border = "1px solid red";
console.log(testDiv.style.backgroundColor); // red
以上改变样式,会直接⾃动更新元素的表现。在标准模式下所有度量值都必须指定⼀个度量单位,如果没有设置会被忽略。
2、“DOM2级样式”中为 style 对象新添加的属性和⽅法
cssText返回或设置style的CSS代码testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
console.log(testDiv.style.cssText);
length CSS属性的数量 console.log(testDiv.style.length);
parentRule返回表⽰CSS信息的CSSRule对象
getPropertyCSSValue(propertyName)返回包含给定属性名的CSSValue对象返回的对象包含连个属性:cssText -->该属性的的字符串值;cssValueType -->css类型,数字常量,0(继承的值)、1(基本的值)、2(值列表)、3(⾃定义的值)
getPropertyValue(propertyName)返回给定属性的字符串值 PropertyValue("background-color"); getPropertyPriority(propertyName)如果给定的属性使⽤了“!important",返回
important,否则返回空字符串
item(index)/⽅括号语法[index]返回给定索引的CSS属性名称 testDiv.style.item(1); testDiv.style[1];
removeProperty(propertyName)删除给定的属性
div border属性setProperty(propertyaName,value,priority)设置属性,及优先级(“important”或空字符串)
var testDiv = ElementById("test");
testDiv.style.backgroundColor = "red";
for(var i=0, len=testDiv.style.length;i<len;i++){ // IE 9+、Safari、Chrome、Firefox、Opera 9+
var prop = testDiv.style[i];
var value = PropertyValue(prop);
console.log(prop + ": " + value);
}
testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
console.log(testDiv.style.cssText);
浏览器⽀持:IE9+、Firefox、Safari、Opera 9+、Chrome
3、计算的样式,ComputedStyle()
计算样式都是只读的,也包含浏览器默认CSS值,⽽有些属性各个浏览器默认值也不同。
getComputedStyle(element,pseudo-element),element是要计算样式的元素,pseudo-element是伪元素(":after"、“:before”),没有伪元素也可以是null。返回的是⼀个CSSStyleDeclaration对象
<style>
#mydiv{
background-color: blue;
width: 100px;
height:200px;
}
</style>
<div id="mydiv" ></div>
var mydiv = ElementById("mydiv");
var computedStyle = document.defaultView ? ComputedStyle(mydiv,null) : mydiv.currentStyle; // IE8- 不⽀持document.defaultView,所有IE都⽀持currentStyle console.log(computedStyle.backgroundColor); // rgb(255, 0, 0) ,IE: red
console.log(computedStyle.width); // 100px
console.log(computedStyle.height); // 200px
console.log(computedStyle.border); //1px solid rgb(0, 0, 0) , IE9+:空字符串,IE8-:undefined
console.log(computedStyle.borderLeftWidth); // 1px
颜⾊的返回值在各个浏览器也不同,有的会转化RGB格式。
border是⼀个综合属性,它包含四个边的边框宽度、颜⾊、类型等,各个浏览器解析不⼀样。所以 co
mputedStyle.border 有的返回有的为空。
4、操作样式表
DOM2提供了操作样式表的接⼝,可以操作通过<link>包含的样式表和在<style>中定义的样式。
。。。。。。。。。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论