javascript对任意颜色获取更亮或更暗的颜色值

预处理CSS,比如Sass和less可以通过设定一个特定值,让任何颜色变得更亮或者更暗。但是在javascript中却没有这种方法。下面这个方法能在javascript中得到一个更亮或者更暗的值,通过一个给定的十六进制颜色值(比如#F06D06,或者没有#)

 
function LightenDarkenColor(col, amt) {
  
    var usePound = false;
  
    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }
 
    var num = parseInt(col,16);
 
    var r = (num >> 16) + amt;
 
    if (r > 255) r = 255;
    else if  (r < 0) r = 0;
 
    var b = ((num >> 8) & 0x00FF) + amt;
 
    if (b > 255) b = 255;
    else if  (b < 0) b = 0;
 
    var g = (num & 0x0000FF) + amt;
 
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
 
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
  
}
// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 
 
// Darken
var NewColor = LightenDarkenColor("#F06D06", -20); 

原文来自css-tricks
轮子工厂--一个分享vue,angular优秀组件的网站

如果你想查询某个元素下的所有任意元素并修改他们的背景颜色,可以使用 JavaScript 中的 `querySelectorAll` 方法和 `forEach` 方法。 例如,假设你有一个 HTML 元素: ```html <div id="parent"> <span>元素1</span> <div>元素2</div> <p>元素3</p> </div> ``` 你可以使用以下代码查询 `id` 为 `parent` 的元素下所有的元素,并将它们的背景颜色设置为红色: ```javascript const parent = document.querySelector('#parent'); const elements = parent.querySelectorAll('*'); elements.forEach(element => { element.style.backgroundColor = 'red'; }); ``` 首先,我们使用 `querySelector` 方法获取 `id` 为 `parent` 的元素,然后使用 `querySelectorAll` 方法查询该元素下的所有元素,并将它们存储在变量 `elements` 中。在这里我们使用了通配符 `*` 来匹配所有元素。 然后,我们使用 `forEach` 方法遍历每个元素,并将它们的背景颜色设置为红色。 需要注意的是,`querySelectorAll` 方法返回的是一个 NodeList 对象,而不是数组,因此不能直接使用数组的方法。如果你想使用数组的方法,可以将 NodeList 对象转换为数组: ```javascript const parent = document.querySelector('#parent'); const elements = Array.from(parent.querySelectorAll('*')); elements.forEach(element => { element.style.backgroundColor = 'red'; }); ``` 在上面的代码中,我们使用 `Array.from` 方法将 NodeList 对象转换为数组,然后使用数组的 `forEach` 方法遍历数组中的每个元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值