JS 操作样式 style

1、任何支持style特性的HTML元素在JavaScript中都对应着有一个style属性,指向一个CSSStyleDeclaration的一个实例对象,包含该元素的内嵌sty
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

1、

任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌style样式(直接定义在HTML元素上的style)。

对于使用短线分割的CSS属性,在JavaScript中转为驼峰式。

几个常见的属性:

CSS属性 JavaScript属性
background-image style.backgroundImage
color style.color
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 = document.getElementById("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代码
此代码由Java架构师必看网-架构君整理
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)  返回给定属性的字符串值  testDiv.style.getPropertyValue("background-color");
 getPropertyPriority(propertyName) 如果给定的属性使用了“!important",返回important,否则返回空字符串   
 item(index)/方括号语法[index] 返回给定索引的CSS属性名称   testDiv.style.item(1); testDiv.style[1];
 removeProperty(propertyName) 删除给定的属性   
 setProperty(propertyaName,value,priority)  设置属性,及优先级(“important”或空字符串)  
     
var testDiv = document.getElementById("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 = testDiv.style.getPropertyValue(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、计算的样式,document.defaultView.getComputedStyle()

 计算样式都是只读的,也包含浏览器默认CSS值,而有些属性各个浏览器默认值也不同。

 getComputedStyle(element,pseudo-element),element是要计算样式的元素,pseudo-element是伪元素(":after"、“:before”),没有伪元素也可以是null。返回的是一个CSSStyleDeclaration对象

此代码由Java架构师必看网-架构君整理
<style> #mydiv{ background-color: blue; width: 100px; height:200px; } </style> <div id="mydiv" style="background-color: red; border: 1px solid black"></div> var mydiv = document.getElementById("mydiv"); var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(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是一个综合属性,它包含四个边的边框宽度、颜色、类型等,各个浏览器解析不一样。所以 computedStyle.border 有的返回有的为空。

 4、操作样式表

 DOM2提供了操作样式表的接口,可以操作通过<link>包含的样式表和在<style>中定义的样式。

。。。。。。。。。

本文来源zhanglw,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/36572
0

发表评论