一、设置CSS
- getComputedStyle / currentStyle 只能获取样式,是只读的
- 设置 css 样式:
动态添加类名、批量设置样式
动态设置行内样式 ele.style[attr] = value
function setCss(ele, attr, value) {
if (attr === 'opacity') {
ele.style.filter = 'alpha(opacity=' + value * 100 + ')';
}
if (attr === 'float') {
ele.style.cssFloat = value; // 标准浏览器设置 float 属性
ele.style.styleFloat = value; // IE 设置 float 属性
return
}
// 把常见的带单位的属性增加单位
let reg = /^(width|height|(margin|padding)?(top|left|right|bottom)?)$/i;
if (reg.test(attr) && !isNaN(value)) {
// 如果传入的不是有效数字或者原来就带有单位时就不加单位了
// isNaN('10px') -> true
value += 'px'
}
ele.style[attr] = value;
}
let box = document.getElementById('box');
setCss(box, 'width', 100);
setCss(box, 'height', 100);
setCss(box, 'backgroundColor', 'red');
二、批量设置CSS样式
- 批量设置 css 样式
批量设置 css 的样式的实现思路是给一个方法传入一个对象,对象中的 key:value 分别表示一个 css 属性和属性对应的值;
const {setCss} = window.utils;
function setBatchCss(ele, batch) {
if (typeof batch !== 'object') return;
for (var key in batch) {
if (batch.hasOwnProperty(key)) {
setCss(ele, key, batch[key])
}
}
}
let box = document.getElementById('box');
setBatchCss(box, {
width: 100,
height: 100,
backgroundColor: 'red'
});
三、封装 CSS 方法:
- 封装一个 CSS 方法,既可以实现获取样式又可以实现设置样式,还可以批量设置样式;根据传入的参数重载方法;
let box = document.getElementById('box');
const {getCss, setBatchCss, setCss} = window.utils;
function css(ele, param, val) {
// 对传入不同参数时进行不同的处理——重载
if (typeof param === 'object') {
// 如果传入一个对象
setBatchCss(ele, param);
}
if (typeof param === 'string' && typeof val === 'undefined') {
// 此时 param 传了一个字符串,val 没传,是要获取
return getCss(ele, param);
}
if (val !== 'undefined') {
setCss(ele, param, val)
}
}
console.log(css(box, 'width')); // 获取
css(box, 'height', 100); // 设置
css(box, {
height: 100,
backgroundColor: 'red'
}); // 批量设置
四、类名操作
- 除了直接设置元素的样式,我们还可以通过设置类名的方式统一处理样式
let box = document.getElementById('box');
1. 判断元素是否有某一个类名
function hasClass(ele, className) {
// 获取该元素的所有类名,然后判断是否包含这个类名
let cN = className.trim();
return ele.className.includes(cN);
}
console.log(hasClass(box, 'abc')); // false
console.log(hasClass(box, 'box')); // true
或者
function hasClass2(ele, className) {
let cN = className.trim();
// 如果在 className 中出现过,返回值是索引位置,不会是 -1,所以就会返回 true,如果没出现过就是 -1,而 -1 不等于 -1;
return ele.className.indexOf(cN) !== -1;
}
2. 增加类名
function addClass(ele, className) {
// 如果元素有这个类名了,则不添加
if (hasClass(ele, className)) return;
ele.className += ` ${className}`; // 添加时要在本次添加类名前面写一个空格
}
addClass(box, 'zero');
3. 移除类名
function removeClass(ele, className) {
className = className.trim();
let ary = className.split(' ');
ary.forEach(item => {
item = item.trim();
let reg = new RegExp(`${item}`, 'g');
ele.className = ele.className.replace(reg, '')
})
}
removeClass(box, 'box zero');
五、classList 对象和操作;
- 元素对象自带 classList 属性,值是一个类数组对象,里面包含了该元素全部的类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div class="box" id="box">我是个div</div>
<button class="btn primary one two three" id="btn">我是一个按钮</button>
<script src="js/utils.js"></script>
<script src="js/5-classList.js"></script>
</body>
</html>
1. classList 对象
let btn = document.getElementById('btn');
let box = document.getElementById('box');
console.log(bot.classList)
// classList 对象
/*
* DOMTokenList(5) [
* 0: "btn"
* 1: "primary"
* 2: "one"
* 3: "two"4: "three"
* length: 5
* value: "btn primary one two three"__proto__: DOMTokenList
* ]
*
* */
classList 还有对应的类名的添加、删除、切换等方法
增加类名
- ele.classList.add(class1, class2)
btn.classList.add('six', 'seven', 'eight');
console.log(btn.classList);
移除类名
- ele.classList.remove()
btn.classList.remove('one');
console.log(btn.classList);
切换类名(如果之前有就移除,如果之前没有就添加)
- ele.classList.toggle(‘class1’);
btn.onclick = function () {
box.classList.toggle('hide');
};