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

yizhihongxing

获取某元素的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实现div不设高度完全居中

    CSS实现div不设高度完全居中的完整攻略主要包括以下几个步骤: 设置父元素为相对定位 .parent { position: relative; } 设置子元素为绝对定位 .child { position: absolute; } 设置子元素的top, left, right, bottom属性为0,并使用margin:auto属性来实现水平和垂直居中 …

    css 2023年6月10日
    00
  • JS实现的透明度渐变动画效果示例

    实现一个透明度的渐变动画效果需要使用 JavaScript 来设置透明度值的变化并设置动画效果。下面是完整攻略: 步骤一:创建 HTML 页面 首先,我们需要创建一个 HTML 页面作为动画效果的载体。我们需要在 HTML 中添加一个元素来进行透明度渐变,比如下面的代码: <!DOCTYPE html> <html> <head…

    css 2023年6月10日
    00
  • 详解HTML5中的picture元素响应式处理图片

    HTML5中的picture元素是一种用于响应式处理图片的标记语言,它能够根据设备屏幕大小及分辨率自动调整网页中的图片尺寸和质量,使得网站在不同设备上展示效果更加出色。下面将详细讲解如何使用picture元素实现响应式图片的处理。 1. 了解picture元素 picture元素提供了一种灵活的图片呈现方式,它的格式如下所示: <picture>…

    css 2023年6月10日
    00
  • flex布局被子元素撑开如何保持内容不超出容器的方法

    Flex布局是一种能够让我们更方便地对容器中的子元素进行排列和布局的方法。不过,在使用Flex布局的时候,我们经常会遇到一个问题,就是子元素的宽度或高度超出了容器的范围,这样就会使布局变得混乱。下面,我将详细介绍如何在Flex布局中保持内容不超出容器。 1. 手动设置子元素宽度 一种简单的方法是手动设置子元素的宽度/高度。这种方法适用于我们确定子元素应该有多…

    css 2023年6月9日
    00
  • SpringBoot静态资源CSS等修改后再运行无效的解决

    关于“SpringBoot静态资源CSS等修改后再运行无效的解决”,一般有以下两种解决方法: 方法一:增加配置项 在SpringBoot的配置文件application.properties中,增加如下配置项: spring.resources.cache-period=-1 这样修改之后,每次请求静态资源的时候都会重新读取文件,不会使用缓存中的静态文件。缺…

    css 2023年6月9日
    00
  • css中引入指定字体@font-face兼容各浏览器的问题

    在 CSS 中引入指定字体 @font-face 兼容各浏览器的问题,主要需要考虑以下几个方面: 字体格式问题 字体路径问题 兼容性问题 下面分别对这些问题进行详细讲解。 1. 字体格式问题 当我们在 CSS 中引入指定字体时,需要注意字体格式,不同的浏览器支持的字体格式也不同。常用的字体格式有: @font-face { font-family: ‘MyF…

    css 2023年6月9日
    00
  • CSS教程:text-indent隐藏文字出现虚线框outline

    以下是关于“CSS教程:text-indent隐藏文字出现虚线框outline”的完整攻略: 1. 什么是text-indent及outline? 在CSS中,text-indent用于控制文本第一行的缩进,outline用于给指定元素添加边框。也就是说,如果文本的第一行被设置了缩进,并且当文本内容超出了元素框时,浏览器会自动添加虚线框。 2. 如何使用te…

    css 2023年6月10日
    00
  • 基于JQuery制作可编辑的表格特效

    下面是基于 jQuery 制作可编辑表格特效的完整攻略。 1. 准备工作 首先,我们需要引入 jQuery 库文件,并创建一个空的 HTML 表格。具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g…

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