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

获取某元素的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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css优先级计算方法(推荐)

    CSS优先级计算方法 CSS优先级指的是浏览器根据CSS选择器的权重来决定采用哪个CSS样式规则。CSS优先级的计算方法是根据选择器的不同类型和数量来确定的。 基本规则 在计算CSS优先级时,可以使用四个级别的选择器类型: 元素选择器和伪元素选择器。 类选择器、伪类选择器和属性选择器。 ID选择器。 内联样式(直接在HTML元素中使用style属性设置的样式…

    css 2023年6月9日
    00
  • 详解如何自定义CSS滚动条的样式

    自定义 CSS 滚动条样式是前端开发中常用的技巧之一,可以用于美化网页滚动条的外观。以下是关于如何自定义 CSS 滚动条样式的完整攻略。 步骤一:创建 HTML 结构 首先,需要在 HTML 文件中创建一个容器元素,用于包含需要自定义滚动条的内容。以下是一个示例: <div class="scrollbar"> <div…

    css 2023年5月18日
    00
  • CSS文本阴影 text-shadow 悬停效果详解

    CSS文本阴影 text-shadow 悬停效果详解 文本阴影是在字体背后添加投影效果,让字体看起来有立体和浮动的效果。 text-shadow 属性可以添加阴影效果,以逐步增加各种文字的 3D 效果,文本阴影可以用于各种文本或标题。 语法 text-shadow: h-shadow v-shadow blur-radius color; 参数 h-shad…

    css 2023年6月10日
    00
  • CSS教程:认识层叠规则互相作用

    下面给您详细讲解 “CSS教程:认识层叠规则互相作用” 的完整攻略: 1. CSS层叠 层叠是CSS的一个特性,表示CSS属性的值可以堆叠起来形成最终的渲染效果,这种渲染效果反映了CSS选择器的优先级。选择器优先级越高,对应的CSS属性值就越具有优先权,就会覆盖掉优先级较低的值。 2. CSS选择器优先级 CSS选择器优先级是用来确定哪个CSS规则应该应用到…

    css 2023年6月9日
    00
  • 推荐10个CSS3 制作的创意下拉菜单效果

    要讲解“推荐10个CSS3制作的创意下拉菜单效果”的完整攻略,需要遵循以下步骤: 1. 寻找示例或来源 在开始编写CSS3下拉菜单之前,我们需要花时间寻找示例或来源以获得灵感和指导。你可以使用Google、GitHub等工具来搜索这些示例或源代码。 2. 理解HTML与CSS的结构和使用 在编写CSS3下拉菜单之前,我们需要先理解HTML和CSS的基础结构和…

    css 2023年6月10日
    00
  • 聊一聊Vue.js过渡效果

    下面是详细讲解“聊一聊Vue.js过渡效果”的完整攻略: 1. Vue.js过渡效果简介 在Vue.js中,过渡效果是指在DOM元素从显示状态变为隐藏状态(或反之)的时候,给元素添加一些过渡效果,使其显示或隐藏更加平滑,提高用户体验。Vue.js提供了<transition>和<transition-group>两个标签,用于实现过渡…

    css 2023年6月11日
    00
  • 详解CSS3选择器的使用方法汇总

    详解CSS3选择器的使用方法汇总 一、选择器概述 CSS选择器是一种用于选择页面上元素的方法,它的作用是帮助我们精准地选择到我们想要的元素,然后针对这些元素进行样式的设置。 CSS3选择器可以分为以下几种类型: 基本选择器 属性选择器 伪类选择器 伪元素选择器 结构性选择器 二、基本选择器 基本选择器指的是针对元素标签名、id、class等基础属性进行选择的…

    css 2023年6月9日
    00
  • JavaWeb表单注册界面的实现方法

    让我来详细讲解一下“JavaWeb表单注册界面的实现方法”的完整攻略。 1. 概述 JavaWeb表单注册界面的实现方法主要包括以下几步: 设计前端页面,包括表单和提交按钮; 创建Java Servlet处理表单数据,将数据存储到数据库中; 创建数据库并设计用户表,用于存储注册用户的信息; 使用JDBC连接数据库,并编写Java代码实现数据的增删改查。 接下…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部