Javascript根据类名中的数字动态设置宽度

我有一个表，每个单元格中都有一个单独的div，该div带有一个以

perc-

为前缀的类，该类将包含从0到100的on数字。例如

perc-60

，相当于60%

我可以在CSS中通过生成一个SASS循环并在

perc-

类上处理100个变量来实现这一点。为了便于学习，我想知道如何通过Javascript实现内联样式，其中可以根据类中的数字设置div的宽度。这些数字是通过我无法控制的后端系统应用的，但会与来自用户的一些数据相关

标记示例：

<table>
    <tr>
        <td class="perc-60"><div></div></td>
    </tr>
    <tr>
        <td class="perc-15"><div></div></td>
    </tr>
    <tr>
        <td class="perc-45"><div></div></td>
    </tr>
    <tr>
        <td class="perc-16"><div></div></td>
    </tr>
    <tr>
        <td class="perc-88"><div></div></td>
    </tr>
    <tr>
        <td class="perc-79"><div></div></td>
    </tr>
    <tr>
        <td class="perc-98"><div></div></td>
    </tr>
</table>

---

目前，我使用SASS循环遍历所有类，并以

td

中的divs宽度为目标。下面是一个jQuery解决方案，它将遍历td并将该类用作参数：

希望您的后端已经在输出前跟零的一位数值

$(document).ready(function(){
    $("td").each(function(){
        $(this).width($(this).attr("class").substring(5,7) + "%");
    });
});

确保您的tds已使用正确的盒子尺寸：

td {
   box-sizing: border-box;
}

---

类是抽象，可以跨元素重用，并且可以轻松地引入属性集。这是更加模块化和可维护的，因为类可以更改或添加到，并且更改会自动传播到使用它们的所有元素

还有一种CSS架构风格，它涉及的类数量非常少，甚至只有一个属性（“微类”）。在这种情况下，它与模块化或更改类的能力无关；这更多的是一个句法上的糖分和紧凑性的问题。例如，我可以定义一个类

absolute

，它被定义为

.absolute{position:absolute；}

，然后简单地说

class='absolute'

，而不是

style='position:absolute；'

在您的情况下，使用类没有任何优势，特别是如果您计划引入额外的预处理器机制来生成所有类。你的建议完全等同于只放一个
style='width:60%；'属性。这正是你应该做的

例如，在
eval
的意义上，将内嵌样式属性直接放在HTML元素上并不是“邪恶的”。这是一种被反对的做法，它有助于鼓励人们编写独立于HTML的模块化、正交样式规则。但是，如果样式是特定于特定元素的，则绝对没有问题。事实上，在这种情况下，分离和外部化类（其唯一目的是为特定HTML元素分配一个或多个属性）可能被视为糟糕的设计。
我被迷住了，我做得很花哨，对不起。我按照最初的要求使用了JavaScript。脚本的每个步骤都有注释


var td=selArray（'td'）；//制作一个选择器数组
对于（var i=0；i
var str=perc.split（'-'）.pop（）；//从类中删除“perc-”，现在保留一个字符串“number”
/* http://stackoverflow.com/a/3568968/2813224 */
var divWidth=str+“%”；//在字符串“number”中添加“%”
//控制台日志（divWidth）；
div.style.width=divWidth；//将字符串“number”指定为宽度
//console.log（div.style.width）；
div.innerHTML=divWidth；//将宽度作为文本插入
}
/*此函数将像jQuery一样接受选择器（例如#elementID、.elementCLASS、elementTAGNAME等），然后返回匹配的选择器数组。
https://developer.mozilla.org/en-US/docs/Web/API/NodeListhttps://developer.mozilla.org/en-US/docs/Web/API/NodeList*/
函数selArray（sel）{
var eleArr=Array.prototype.slice.call（document.queryselectoral（sel））；
返回eleArr；
}
html{
框大小：边框框；
字体：900 16px/1.5“源代码Pro”；
}
*,
*：之前，
*：之后{
框大小：继承；
保证金：0；
填充：0；
边界：0；
}
身体{
高度：100vh；
宽度：100vw；
背景:#666；
}
表10.x{
填充：0；
盒影：0 1px 9px 1px#ccc；
边界半径：6px；
保证金：20px自动；
宽度：80%；
表布局：固定！重要；
}
第十{
颜色：#FFF；
背景#086ac8；
填充：10px；
文本对齐：居中；
垂直对齐：中间对齐；
高度：2米；
}
.x tr:n个孩子（奇数）{
背景色：#333；
颜色：#FFF；
}
.x tr:n个孩子（偶数）{
背景色：#2e90ef；
颜色：#333；
}
.x td{
边框样式：实心；
边框宽度：1px；
边框颜色：#57acff；
填充物：5px；
文本对齐：左对齐；
垂直对齐：中间对齐；
高度：2米；
}
泰德：第一个孩子{
边框左上半径：6px；
}
泰德：最后一个孩子{
边框右上角半径：6px；
}
.x tbody tr:最后一个孩子th:第一个孩子{
边框左下半径：6px；
}
.x tbody tr:最后一个孩子td:第一个孩子{
边框左下半径：6px；
}
.x t车身tr:最后一个孩子td:最后一个孩子{
边框右下半径：6px；
}
.x运输署分区{
高度：1.5em；
外形：1px实心#FC0；
背景：hsla（60,100%，50%，0.3）；
垂直对齐：中间对齐；
}

希望根据类值（每个单元格中的div）设置每行宽度。抱歉，我需要澄清这一点。这应该不难，但使用pure可能需要更长的时间