js获取某元素的class里面的css属性值代码

获取某元素的class里面的CSS属性值,在JavaScript中可以使用以下方法:

获取某元素的class里面的CSS属性值,在JavaScript中可以使用以下方法:

方法一:使用getAttribute方法

通过getAttribute方法获取class属性的值,然后通过cssText属性获取样式表中的CSS值。

示例代码如下:

// 获取element元素下class为test的元素的背景颜色
var element = document.querySelector('element');
var className = 'test';
var classEles = element.querySelectorAll('.' + className);
var bgColor = null;    // 初始化背景颜色变量
for (var i = 0, len = classEles.length; i < len; i++) {
    bgColor = classEles[i].getAttribute('style');    // 获取元素的样式代码
    if(bgColor.indexOf('background-color') !== -1) {
        var n = bgColor.indexOf(':');
        bgColor = bgColor.substring(n + 1).trim();
    }
}
console.log(bgColor);    // 输出背景颜色

在上述代码中,我们首先先通过querySelector方法来获取元素,再通过querySelectorAll方法与class选择器一起获取想要操作的元素。然后使用getAttribute方法获取元素的style属性的值,最后根据CSS代码的特点截取出style属性中对应CSS属性的值。

方法二:使用window.getComputedStyle方法

通过window.getComputedStyle方法获取元素的所有CSS属性,然后通过getPropertyValue属性获取想要的CSS值。

示例代码如下:

// 获取element元素下class为test的元素的背景颜色
var element = document.querySelector('element');
var className = 'test';
var classEles = element.querySelectorAll('.' + className);
var cssStyle = null;    // 初始化CSS样式变量
for (var i = 0, len = classEles.length; i < len; i++) {
    cssStyle = window.getComputedStyle(classEles[i]);
    console.log(cssStyle.getPropertyValue('background-color'));    // 输出背景颜色
}

在上述代码中,我们使用querySelector方法获取元素,再通过querySelectorAll方法与class选择器一起获取想要操作的元素。然后使用window.getComputedStyle方法获取元素的所有CSS属性,最后通过getPropertyValue方法获取想要的CSS值。

总结来说,通过以上两种方法都可以获取元素class里面的CSS属性值,具体使用哪种方法可以根据需要和实际情况来选择。

本文标题为:js获取某元素的class里面的css属性值代码

基础教程推荐