获取某元素的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属性值代码
基础教程推荐
- HTML5 Ajax文件上传进度条如何显示 2022-12-28
- JavaScript实现cookie的写入、读取、删除功能 2024-03-21
- JS把内容动态插入到DIV的实现方法 2023-12-01
- 如何学习html的各种标签 2022-11-13
- js实现的类marquee水平循环滚动 2024-01-09
- 四步轻松实现ajax发送异步请求 2023-02-14
- 图文详解Element-UI中自定义修改el-table样式 2024-04-01
- 简单实现js页面切换功能 2024-04-23
- 推荐一个好看Table表格的css样式代码详解 2022-11-20
- CSS属性中Display与Visibility区别分析 2024-03-09