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

Question

我有一个表格，每个单元格中都有一个单独的 div，其类的前缀为 perc-并且将包含 0 到 100 范围内的数字。例如 perc-60这相当于 60%。

我可以在 CSS 中通过生成 SASS 循环并处理 perc- 上的 100 个变体来完成此操作。类(class)。出于学习的目的，我想知道如何通过 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 循环来遍历所有类，并将 div 宽度定位在 td 范围内。 .

Answer 1

我得意忘形了，我把它想象得很奇特，抱歉。我按照最初的要求使用了 JavaScript。脚本的每个步骤都有注释。

	var td = selArray('td'); // Make an array of <td> selectors
	for (var i = 0; i < td.length; i++) { // Loop thru array
	  var perc = td[i].className; // Find each <td> class
	  //console.log('Cell '+i+': '+perc);
	  var cell = document.querySelector('.' + perc); // Create DOM Object for <td>
	  //console.log(cell.className);
	  var div = cell.querySelector('div'); // Create DOM Object for <td> > <div>
	  var str = perc.split('-').pop(); // Strip 'perc-' from class, now a String "number" remains
      /* http://stackoverflow.com/a/3568968/2813224 */
	  var divWidth = str + "%"; // Add a "%" to String "number"
	  //console.log(divWidth);
	  div.style.width = divWidth; // Assign String "number" as <div> width
	  //console.log(div.style.width); 
	  div.innerHTML = divWidth; // Insert width as text into <div>
	}
	/* This function will accept a selector (ex. #elementID, .elementCLASS, elementTAGNAME, etc.) like jQuery does and then returns an array of selectors that matched. 
    https://developer.mozilla.org/en-US/docs/Web/API/NodeListhttps://developer.mozilla.org/en-US/docs/Web/API/NodeList */
	function selArray(sel) {
	  var eleArr = Array.prototype.slice.call(document.querySelectorAll(sel));
	  return eleArr;
	}

html {
  box-sizing: border-box;
  font: 900 16px/1.5'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  height: 100vh;
  width: 100vw;
  background: #666;
}
table.x {
  padding: 0;
  box-shadow: 0 1px 9px 1px #ccc;
  border-radius: 6px;
  margin: 20px auto;
  width: 80%;
  table-layout: fixed !important;
}
.x th {
  color: #FFF;
  background: #086ac8;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  height: 2em;
}
.x tr:nth-child(odd) {
  background-color: #333;
  color: #FFF;
}
.x tr:nth-child(even) {
  background-color: #2e90ef;
  color: #333;
}
.x td {
  border-style: solid;
  border-width: 1px;
  border-color: #57acff;
  padding: 5px;
  text-align: left;
  vertical-align: middle;
  height: 2em;
}
thead th:first-child {
  border-top-left-radius: 6px;
}
thead th:last-child {
  border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
  border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}
.x td div {
  height: 1.5em;
  outline: 1px solid #FC0;
  background: hsla(60, 100%, 50%, .3);
  vertical-align: middle;
}

<table class='x'>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>