Question

我有一个表，并在每个单元格中驻留一个单独的div，其中一个类以perc-为前缀，并且将包含0到100之间的数字。例如，perc-60等同于60％。

我可以通过生成SASS循环并在perc-类上处理100个变体来在CSS中执行此操作。为了学习的目的，我想知道如何通过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内定位div宽度。

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>

Answer 2

这是一个jQuery解决方案，它将遍历td并使用该类作为参数：

希望您的后端已经输出前面有零的单位数值。

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

确保您的tds已使用正确的大小调整大小：

td {
   box-sizing: border-box;
}

Answer 3

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

还有一种CSS架构风格，它涉及数量非常少的类，甚至只有一个属性（“微类”）。在这种情况下，它不是模块化或改变班级的能力;它更多的是语法糖和紧凑。例如，我可以定义一个定义为absolute的类.absolute { position: absolute; }，然后通过简单地说class='absolute'而不是style='position: absolute; '将其应用于HTML元素。

在您的情况下，使用类没有任何优势，特别是如果您计划引入其他预处理器机制来生成所有类。您提出的建议完全等同于仅在元素上添加style='width: 60%; '属性。这正是你应该做的。

直接在HTML元素上放置内联样式属性并不是“邪恶的”，例如eval。这种做法已被弃用，以帮助鼓励人们编写独立于HTML的模块化，正交样式规则。但是，如果样式特定于特定元素，那么它绝对没有错。实际上，在这种情况下，可以将分离和外部化的类设计视为糟糕的设计，其唯一目的是将一个或多个属性分配给特定的HTML元素。

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

3 个答案: