一、元素样式
1、原生js获取元素样式
以下使用dom代表元素节点。
1、dom.style.xx
如要获取一个元素的color,可以使用 元素.style.color 。需要注意的是这种方式只能获取元素的行内样式值,无法获取到定义在<style></style>
标签和通过<link href="xx.css">
加载进来的样式。语法如下:
let el= document.getElementById("test");
el.style.color;
2、getComputedStyle()
window对象的getComputedStyle方法,第一个参数是Element对象,第二个参数可以是null、空字符串、伪元素字符串,该方法返回一个只读的表示计算样式的CSSStyleDeclaration对象,它代表了实际应用在指定元素上的最终样式信息,即各种CSS规则叠加后的结果。语法如下:
let el= document.getElementById("test");
let demo = window.getComputedStyle(el, null);
console.log(demo.height)
console.log(demo.length)//样式数量
需要注意的是:Firefox和Safari会将颜色转换成rgb格式,如果text节点上没有任何样式,通过demo.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用下面的方法。
3、dom.currentStyle
currentStyle 是IE浏览器自己的一个属性,其语法与dom.style类似,差别在于dom.currentStyle返回的是元素最终的样式信息(包括标签<style></style>
、行内样式和通过<link href="xx.css">
加载进来的样式等)。语法如下:
let el= document.getElementById("test");
let demo = el.currentStyle;
console.log(demo.height)
注意:只适用于ie。
4、CSSStyleDeclaration getPropertyValue() 方法,返回指定的css的属性的值。语法如下:
let el= document.getElementById("test");
let demo = window.getComputedStyle(el, null).getPropertyValue("background-color");
console.log(demo)
注意:属性名不支持驼峰格式,IE6-8不支持该方法。
5、getAttribute(‘style’)
和dom.style.xx一样,只能获取行内样式。
let el= document.getElementById("test");
let demo = el.getAttribute("style");
console.log(demo)
2、样式相关小结
jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法,当我们使用原生的js开发时就可以通过以上方法获取元素的值。
下面是一个兼容ie,firefox,chrome等浏览器的获取元素样式的方法,可以应用到项目中:
function getStyle(dom) {
let style = null;
if(window.getComputedStyle) {
style = window.getComputedStyle(dom, null);
}else{
style = dom.currentStyle;
}
return style;
}
3、原生js修改元素样式
- dom.style.xx=‘xx’ 或 dom.style.textAlign=‘xx’ 或 dom.style[‘text-align’]=‘xx’
- dom.style.cssText=‘width:300px’;
- dom.setAttribute(‘style’, ‘font-size: 15px !important’)
- el.style.setProperty(“background-color”,‘orange’);//可以参考:https://www.runoob.com/jsref/obj-cssstyledeclaration.html
- 改变元素class名
二、原生js获取设置元素属性值
1、getAttribute(‘attr_name’) 获取元素属性值。
let el= document.getElementById("test");
let demo = el.getAttribute("id");
console.log(demo)
添加元素属性:obj.setAttribute(‘attr_name’,‘attr_value’);
删除元素属性:obj.removeAttribute(‘attr_name’);