获取某元素的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属性值代码 - Python技术站