前言：
而今兄弟们对“css怎么封装”大致比较注意，朋友们都需要剖析一些“css怎么封装”的相关文章。那么小编同时在网摘上汇集了一些关于“css怎么封装””的相关文章，希望兄弟们能喜欢，各位老铁们快快来学习一下吧！1、封装一个公共方法库
let utils = (function () {
//=>获取元素的样式
let getCss = function (curEle, attr) {
if (typeof window.getComputedStyle === 'undefined') {
return;
}
let val = window.getComputedStyle(curEle, null)[attr],
reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i;
reg.test(val) ? val = parseFloat(val) : null;
return val;
};
//=>设置元素样式
let setCss = function (curEle, attr, value) {
if (attr === 'opacity') {
curEle.style.opacity = value;
curEle.style.filter = `alpha(opacity=${value * 100})`;
return;
}
if (!isNaN(value)) {
let reg = /^(width|height|fontSize|((margin|padding)?(top|left|right|bottom)?))$/i;
reg.test(attr) ? value += 'px' : null;
}
curEle['style'][attr] = value;
};
//=>批量设置元素样式
let setGroupCss = function (curEle, options = {}) {
for (let attr in options) {
if (!options.hasOwnProperty(attr)) break;
setCss(curEle, attr, options[attr]);
}
};
//=>CSS操作汇总
let css = function (...arg) {
let len = arg.length,
fn = getCss;
len >= 3 ? fn = setCss : null;
len === 2 && (arg[1] instanceof Object) ? fn = setGroupCss : null;
return fn(...arg);
};
//=>offset：获取当前元素距离BODY的偏移(左偏移和上偏移)
let offset = function (curEle) {
//1.先获取当前元素本身的左/上偏移
let curLeft = curEle.offsetLeft,
curTop = curEle.offsetTop,
p = curEle.offsetParent;
//2.累加父参照物的边框和偏移(一直向上找,找到BODY为止,每当找到一个父参照物都把它的边框和偏移累加起来,根据元素不一样,具体找几次也不知道)
//TAG-NAME获取当前元素的标签名(大写的)
while (p.tagName !== 'BODY') {//=>当找到的父参照物是BODY结束查找和累加操作
//3.把找到的父参照物的边框和偏移值累加起来
curLeft += p.clientLeft;
curLeft += p.offsetLeft;
curTop += p.clientTop;
curTop += p.offsetTop;
p = p.offsetParent;//=>基于当前找到的父参照物继续向上查找
}
return {
top: curTop,
left: curLeft
};
};
//=>操作浏览器盒子模型属性的
let winHandle = function (attr, value) {
if (typeof value !== 'undefined') {
//=>设置盒子模型属性值:SCROLL-TOP/LEFT
document.documentElement[attr] = value;
document.body[attr] = value;
return;
}
return document.documentElement[attr] || document.body[attr];
};
return {
css, //=>在ES6中直接这样写相当于 css:css
offset,
winHandle
}
})();
2、FOR-IN循环
=>遍历一个对象中的键值对的，有多少组键值对，我们就遍历多少次。
let obj = {name: 'xxx', age: 27, 0: 0, sex: 0, score: 100, 1: 1};
for (let key in obj) {
// console.log(key);//=>KEY存储的是每一次循环获取的属性名
// console.log(obj[key]);//=>每一次循环基于KEY获取属性值
// if(key==='age'){
// break; 也支持BREAK和CONTINUE等关键词
// }
// console.log(key);
}
注意：FOR-IN遍历的时候有自己的顺序：先遍历数字属性名（按照小->大），再遍历字符串属性名（按照书写顺序）：
for (let attr in obj) {
console.log(attr);//=>0 1 name age sex score
}
//=>obj.__proto__===Object.prototype : obj是Object这个类的一个实例
//=>大括号中的是OBJ的私有属性，Object.prototype上的是OBJ公有属性
Object.prototype.bbbb = 1000;
for (let key in obj) {
//=>FOR-IN循环只遍历当前对象可枚举（可遍历）的属性
//1.对象的私有属性(自己写的)是可枚举的
//2.浏览器内置的属性一般都是不可枚举的
//3.自己在类的原型上设置的属性也是可枚举的,FOR-IN循环的时候也会被遍历出来（一般情况下我们是不想遍历到原型上的公有属性的）
if (obj.hasOwnProperty(key)) {//=>一般使用FOR-IN在遍历对象的时候，我们加一个私有属性的验证，只有是私有的属性，我们才做操作
console.log(key);
}
}
3、JS盒子模型的其他几个属性
offsetParent：当前盒子的父级参照物
offsetTop / offsetLeft：获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移) 当前盒子的外边框开始~父级参照物的内边框。
“参照物”：同一个平面中，元素的父级参照物和结构没有必然联系，默认他们的父级参照物都是BODY（当前平面最外层的盒子） BODY的父级参照物是NULL。
center.offsetParent //=>BODY
inner.offsetParent //=>BODY
outer.offsetParent //=>BODY
“参照物可以改变”：构建出不同的平面即可（使用zIndex，但是这个属性只对定位有作用），所以改变元素的定位(position:relative/absolute/fixed)可以改变其父级参照物。
// utils.css(outer, {
// position: 'relative' //=>把OUTER脱离原有的平面，独立出一个新的平面，后代元素的父级参照物都会以它为参考
// });
console.log(center.offsetParent);//=>OUTER
console.log(inner.offsetParent);//=>OUTER
console.log(outer.offsetParent);//=>BODY
utils.css(inner, {position: 'absolute'});
console.log(center.offsetParent);//=>INNER
console.log(inner.offsetParent);//=>OUTER
console.log(outer.offsetParent);//=>BODY
console.log(document.body.offsetParent);//=>NULL
scrollTop / scrollLeft：滚动条卷去的宽度或者高度
最小卷去值：0
最大卷去值：真实页面的高度 - 一屏幕的高度 document.documentElement.scrollHeight-document.documentElement.clientHeight
在JS盒子模型13个属性中，只有scrollTop/scrollLeft是“可读写”属性，其余都是“只读”属性。
操作浏览器的盒子模型属性，我们一般都要写两套，用来兼容各种模式下的浏览器。
console.log(utils.winHandle('scrollTop'));
标签： #css怎么封装
