真实项目中,我们需要获取元素的某一个具体样式值
元素.style.xxx:只能获取元素的行内样式值(我们必须把样式写在行内上才能获取到,写在样式表中的,我们获取不到)
真实项目中,我们自己编写样式基本都不写在行内上
只有基于JS设置元素的样式,才有可能设置在行内上 元素.style.xxx=xxx
window.getComputedStyle&& curEle.currentStyle:获取元素的样式
获取元素所有计算过的样式(回流阶段计算的样式信息就是“计算过的样式”):不论样式写在哪、
再或者不写按照浏览器默认样式处理等
【标准浏览器】
window.getComputedStyle(元素对象,伪类/null)
返回的是所有被计算过的样式对象CSSStyleDeclaration
【IE6~8中】
元素.currentStyle 返回样式对象
先封装一个公共方法getCss:实现获得元素具体的样式
function getCss(element, attr) {
优化:如果我们获取的结果符合 "数字+单位" 100px 的格式,我们默认就把单位去掉,变为纯数字;
如果获取的是 “纯数字的字符串”,‘1’ 我们也把其转换为数字;
如果是组合值或者非数字的 auto ,则不进行任何的处理;
let value = window.getComputedStyle(element)[attr],
reg = /^\d+(px|rem|em)?$/i;
if (reg.test(value)) {
value = parseFloat(value);
}
return value;
}
js设置元素的样式
设置行内样式 元素.style.xxx=xxx | 元素.style.cssText='xxx'
设置样式类 元素.className=xxx
封装一个方法setCss:实现设置元素的样式
function setCss(element, attr, value) {
// 优化:如果传递的是opacity,在IE低版本中用的filter设置样式
if (attr === "opacity") {
element['style']['opacity'] = value;
element['style']['filter'] = `alpha(opacity=${value*100})`;
return;
}
// 优化:对于某些特定样式(例如:width/height/margin/padding/marginTop.../paddingTop.../left/top/bottom/right...)如果传递的value没有带单位的(纯数字)我们手动默认给他加上PX单位
let reg = /^(width|height|margin|padding)?(top|left|bottom|right)?$/i;
if (reg.test(attr)) {
// 只有人家value没有传单位,我们才自己加单位(只有传递的是有效数字,我们才设置单位)
if (!isNaN(value)) {
value += 'px';
}
}
element['style'][attr] = value;
}
封装一个方法setGroupCss:实现元素批量设置样式
function setGroupCss(element, options) {
// 循环传递的样式对象,分别调取setCss设置样式即可
for (let key in options) {
if (!options.hasOwnProperty(key)) break;
setCss(element, key, options[key]);
}
}
setGroupCss(box, {
width: 100,
height: 100
});
封装一个方法css:既可以实现获取,也可以实现单一设置,也可以实现批量设置
// 1.如果传递的是三个参数则为单一设置样式
// 2.如果传递的是两个参数
// 第二个参数是个对象:则为批量设置样式
// 第二个参数是个字符串:则为获取样式
function css(element) {
let len = arguments.length,
attr = arguments[1],
value = arguments[2];
if (len >= 3) {
// 单一设置样式
setCss(element, attr, value);
return;
}
if (attr !== null && typeof attr === "object") {
// 批量设置
setGroupCss(element, attr);
return;
}
// 获取样式
return getCss(element, attr);
}