js对 DOM 的 CSS 属性操作

CSS属性操作: 

指的是通过JavaScript来操作一个元素的CSS样式

 

获取CSS属性值: 

getComputedStyle(obj).attr / getComputedStyle(obj)['attr']  两种写法一样

attr表示css属性名,但必须写成驼峰型,如font-size应该写成fontSize,因为'-'不是有效的js标识符

 

设置CSS属性值:

可以同时设置多个CSS属性,这也是在元素的style属性中添加的 obj.style.cssText='值'

如 oDiv.style.cssText='width:100px;height:100px;border:1px solid gray'

在实际开发中很少使用这种方式设置多个css属性

而是采用操作html属性的方式给元素加上一个class属性,从而整体地给元素添加属性

无法使用obj.style.attr的方式来获取内部样式或者外部样式,这种方式只能获取行内样式

所以获取css的属性值要使用getComputedStyle(obj).attr

 

01获取元素CSS样式属性

getComputedStyle(oBox).backgroundColor

02style对象设置css行内样式

oBox.style.border='2px solid green';

03cssText属性设置举例

var el = document.querySelector(’.el’);
el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px;’;

04对css名修改

方法一：

DOM.className = '类名'; //修改

DOM.className += ' 类名；//添加

DOM.className += ' 移除；

//此方法缺点不灵活，需要借助正则来精确修改

 

方法二：

DOM.setAttribute("class", "类名")
 
DOM.removeAttribute("class", "类名"）

DOM.attribute("class")

说明：setAttribute用于创建或改变某个新属性，如果指定属性已经存在，则只设置该值并且会替换原来的值。

 

方法三：（推荐）

DOM.classList.add('类名一', '类名二', '类名三'); // 添加一个或多个类名
 
DOM.classList.remove('类名一', '类名二', '类名三'); // 删除一个或多个类名
 
DOM.classList.toggle('类名'); // 切换类名