使用纯 Js 或 jquery 获取相同的 64 个类的 CSS 属性值

Get same CSS property value of 64 classes with pure Js or jquery

本文关键字：CSS 属性 Js 获取 jquery      更新时间：2023-09-26

我已经在 dom 中创建了 64 个颜色按钮 js. 它们的类名如下所示：

c1
c2
c3
c4

等等..

我通过以下代码创建了它：

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');
for (var linum = 1; linum < 65; linum++) {
    var Cselector = ".c" + linum;
    var colorMenu = $(Cselector).css( "background-color" );
    eg_color_ul_1.append("<a class='"c" + linum + "'" color-code='""+ colorMenu +"'"></a>"),
    eg_color_ul_2.append("<a class='"c" + linum + "'" color-code='""+ colorMenu +"'"></a>");
}

我已经在css样式表中设置了所有颜色。喜欢这个：

.c1 {
    background-color: #F44336;
}
.c2 {
    background-color: #E91E63;
}
.c3 {
    background-color: #9C27B0;
}
.c4 {
    background-color: #673AB7;
}

现在我没有得到 dom 的颜色。它显示color-code="undefined"

我该如何解决它？

我很抱歉这个标题。我不明白标题应该是什么。所以我把这个。

编辑：
由于@Abdul的回答，我已经更正了我的js。但它仍然显示出color-code="undefined".当我控制台记录时，它显示

rgb(244, 67, 54)                                              main.js:10 
63 undefined                                                  main.js:10

这一行是错误的：

var colorMenu = $(Cselector).css( "background-color" );

应该是：

var colorMenu = $('.' + Cselector).css( "background-color" );

或者保留你的行，但改变这个：

var Cselector = ".c" + linum;
                 ^ notice the period

看到这个小提琴

我还会重构您的代码：

https://jsfiddle.net/6551a0ku/2/

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');
for (var linum = 1; linum < 5; linum++) {
    var className = 'c' + linum;
    var Cselector = '.' + className;
    var colorMenu = $(Cselector).css( "background-color" );
    eg_color_ul_1.append(getATag(className, colorMenu)),
    eg_color_ul_2.append(getATag(className, colorMenu));
}
function getATag(className, colorMenu) {
  var aTag = "<a class='"
  + className
  + "' color-code='"
  + colorMenu 
  + "'>a</a>";
  return aTag;
}
我认为对

jQuery将从哪里提取背景颜色属性存在误解。DOM/jQuery 不会直接理解您设置的 CSS 属性，直到您将它们与实际 DOM 或文档片段中的 DOM 元素相关联。

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');
for (var linum = 1; linum < 65; linum++) {
    var Cselector = ".c" + linum;
    // the problem is here, at this point, there are no dom elements that match .cN so there is no value to return
    var colorMenu = $(Cselector).css( "background-color" );
    eg_color_ul_1.append("<a class='"c" + linum + "'" color-code='""+ colorMenu +"'"></a>"),
    eg_color_ul_2.append("<a class='"c" + linum + "'" color-code='""+ colorMenu +"'"></a>");
}

您可以通过先将锚标记附加到 DOM 然后分配颜色代码属性来解决此问题。

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');
for (var linum = 1; linum < 65; linum++) {
    eg_color_ul_1.append("<a class='"c" + linum + "'"></a>"),
    eg_color_ul_2.append("<a class='"c" + linum + "'"></a>");
}
for (var linum = 1; linum < 65; linum++) {
    var domElement = $(".c" + linum)
    var colorMenu = domElement.css("background-color")
    domElement.attr('color-code', colorMenu)
}

我不熟悉 JQuery，但如果element.css("property")等同于element.style.property那么这就是你的问题，那里style指的是内联style属性，并且当您使用样式表时，这不会返回任何内容。

解决方案是改用 getComputedStyle() ，如下所示：

var eg_color_ul_1=$(".eg-ul-1");
var eg_color_ul_2=$(".eg-ul-2");
for(var linum=1;linum<65;linum++){
  var colorMenu=window.getComputedStyle($(".c"+linum),null).getPropertyValue("background-color");
  eg_color_ul_1.append("<a class='"c"+linum+"'" data-color-code='""+colorMenu+"'"></a>");
  eg_color_ul_2.append("<a class='"c"+linum+"'" data-color-code='""+colorMenu+"'"></a>");
}

我还建议使用数据属性而不是自定义属性来避免任何潜在问题。

相关文章：