Javascript：如何通过 ID 获取元素，然后将元素添加/放置到内联样式中

Question

如果可能，我希望 javascript 首先通过放置在表格中的 ID 获取元素。然后将所述元素添加/放置到不同 div 的内联样式 (width="XX%") 中。

注意：我无法控制 ID 的输出。只要知道该值将决定百分比条的宽度。

---

getelementbyid：

<span *id="per-girls*">**95**</span>

将元素放入内联 css：

<div class="bar bar1" style="width: **95**%;"></div>

---

         $(function(){
             $("#dTable").dataTable({
                 "columns": [
                         {
                             "title":"Languages"
                         },
                         {
                             "title":"Votes",
                             "render": function(data, type, row, meta){
                                 return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
                             }
                         },
                         {
                             "visible":false
                         },
                         {
                             "title": "Positive/Neutral/Negative",
                             "sortable":false,
                             "render": function(data, type, row, meta){
                                 return $("<div></div>", {
                                     "class": "bar-chart-bar"
                                 }).append(function(){
                                     var bars = [];
                                     for(var i = 1; i < Object.keys(row).length; i++){
                                         bars.push($("<div></div>",{
                                             "class": "bar " + "bar" + i
                                         }).css({
                                             "width": row[i] + "%"
                                         }))
                                     }
                                     return bars;
                                 }).prop("outerHTML")
                             }
                         }
                 ]
             });
         });

         .bar-chart-bar {
         background-color: #e8e8e8; 
         display: block; 
         position:relative; 
         width: 100%; 
         height: 40px;
         }
         .bar {
         position: absolute;
         float: left; 
         height: 100%; 
         }
         .bar1 {
         background-color: #007398;
         z-index: 40;
         }
         .bar2 {
         background-color: #00b0b9;
         width: 100%; 
         z-index: 20;
         }

      <div class="col-sm-12">
         <table id="dTable" cellspacing="0" width="100%" role="grid" aria-describedby="dTable_info">
            <tbody>
               <tr role="row">
                  <td style="width: 20%;"> % of girl gamers</td>
                  </td>
                  <td style="width: 10%;"> <span id="per-girls">95</span>% </td>
                  <td>
                     <div class="bar-chart-bar bar-girl">
                        <div class="bar bar1" style="width: 20%;"></div>
                        <div class="bar bar2"></div>
                     </div>
                  </td>
               </tr>
               <tr role="row">
                  <td> % of boy gamers</td>
                  </td>
                  <td><span id="per-boy">57</span>% </td>
                  <td>
                     <div class="bar-chart-bar bar-boy">
                        <div class="bar bar1" style="width: ;"></div>
                        <div class="bar bar2"></div>
                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>

Answer 1

除了设置 div 的宽度（您也可以使用相同的方法），使用背景渐变进行填充对我来说似乎更优雅。

在下面的 sn-p 中，自定义 css 属性用于通知填充条的线性渐变。通过更改属性的值，您可以设置填充百分比：

function setBar(valueElemId) {
  // find the element
  const valueElem = document.getElementById(valueElemId);
  
  // get its text as a numeric value
  const value = Number(valueElem.textContent);
  
  // find the nearest TR parent and set the css custom property
  // that the linear-gradient uses to fill the bar
  valueElem.closest('tr').style=`--pct: ${value}`;
}

// invoke setBar for each id
['per-girls', 'per-boy'].forEach(setBar);

:root {
  --pct: 0; /* no fill by default */
}

.bar-chart-bar {
  min-height: 30px;
  background: #00b0b9; /* the background/base color */
  background-image: linear-gradient(90deg,
    #007398 0 calc(var(--pct) * 1%), /* from 0 to --pct */
    transparent calc(var(--pct) * 1%) /* leave the rest transparent */
  );
}

<div class="col-sm-12">
  <table>
    <tbody>
      <tr>
        <td style="width: 20%;"> % of girl gamers</td>
        <td style="width: 10%;"> <span id="per-girls">95</span>% </td>
        <td>
          <div class="bar-chart-bar"></div>
        </td>
      </tr>
      <tr>
        <td> % of boy gamers</td>
        <td><span id="per-boy">57</span>% </td>
        <td>
          <div class="bar-chart-bar"></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>