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边框图片是在CSS3中新加入的一种样式,可以为边框添加一个图像来代替传统的边框样式。这种样式常常被用于设计画廊、摄影和艺术网站等需要高度定制的网站。 以下是如何使用CSS边框图片的完整攻略: 创建图像 首先,您需要制作一个适合您网站主题的边框图像。图像应该是颜色和基本模式的混合体,以为不同的网站主题增加视觉吸引力。 使用 border-image 属性…

    Web开发基础 2023年3月30日
    00
  • 一文详解如何在Vue3中使用jsx/tsx

    一文详解如何在Vue3中使用jsx/tsx 在Vue 3 中,支持使用 JSX 和 TSX 语法来开发 Vue 组件。本文将详细讲解如何在 Vue 3 中使用 JSX 和 TSX 语法来编写组件。 注意:在使用开发环境前,请确保你已经正确安装好了 Vue 3 和相关依赖。 安装依赖 使用 JSX 和 TSX 语法来开发 Vue 组件,我们需要安装以下依赖: …

    css 2023年6月10日
    00
  • html页面高度不固定在不同浏览器下的兼容性设置

    为了确保 HTML 页面在不同浏览器中显示效果一致,需要设置 HTML 页面的高度和宽度。HTML 表示网页的结构,CSS 用于表现网页的样式和布局,在设置页面高度的时候需要关注以下几点: 设置HTML和body标签的高度都为100% html, body { height: 100%; } 设置包含页面的容器的高度 如果网页的内容放在一个固定大小的容器中,…

    css 2023年6月10日
    00
  • 强制显示、隐藏(IE\Mozilla)浏览器的滚动条实现代码

    强制显示或隐藏浏览器滚动条是网页制作中经常使用的技巧之一。下面我们就来详细讲解如何实现该功能。 方法一:使用CSS样式来控制滚动条 使用CSS样式可以对滚动条进行样式定制,并且可以通过设置overflow属性来控制是否显示滚动条。 隐藏滚动条 要隐藏滚动条,可以将body、html标签的overflow属性设置为hidden: body, html { ov…

    css 2023年6月10日
    00
  • vue-cli的index.html中使用环境变量方式

    下面我来详细讲解使用环境变量方式在Vue CLI的index.html中使用的完整攻略。 1. 环境变量配置 首先,我们需要在.env文件中配置环境变量。Vue CLI会自动加载.env文件中的配置,具体的加载顺序可以参考官方文档。下面是一个简单的.env文件示例: VUE_APP_TITLE=My App VUE_APP_API_BASE_URL=http…

    css 2023年6月9日
    00
  • JavaScript实现一个前端会魔法的旋转魔方相册

    首先我们需要明确一下魔方相册的效果和基本知识。魔方相册其实就是六个面,每个面都有若干张图片,可以通过鼠标拖拽的方式对相册进行旋转,显示不同的图片。那么我们需要用到的技术就是CSS3的transform和JavaScript的事件监听。 我们可以将魔方的每个面看成一个盒子,每个盒子里面包含若干张图片,然后将这些盒子通过CSS3的transform样式进行变形,…

    css 2023年6月9日
    00
  • js 实现picker 选择器示例详解

    下面是JS实现Picker选择器的攻略及示例说明: 什么是Picker选择器? Picker选择器是一种在网页中通过下拉列表的形式进行选择,能够提供选择的参考和便利的组件。 选择器的实现 Picker的实现需要用到JavaScript。其中主要的步骤包括: 创建下拉列表的DOM节点; 填充下拉列表的选项; 监听下拉列表的事件,并在选择后获取选择的值; 将选择…

    css 2023年6月9日
    00
  • 教你使用css制作出超级炫酷的血轮眼和轮回眼特效

    下面是“教你使用css制作出超级炫酷的血轮眼和轮回眼特效”的完整攻略: 教你使用css制作出超级炫酷的血轮眼和轮回眼特效 准备工作 在开始之前,需要准备以下工作: 在html中引入以下css样式: .eye { width: 30px; height: 30px; background: white; border: 3px solid black; bor…

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