Question

我有一些span对象，我使用具有特定width属性的jQuery插入到表中。我希望这些对象的宽度随窗口大小的变化而变化，因为该表具有相对位置。

这是我的代码（该代码段并没有很好地显示问题 - 更改窗口大小，但它提供了上下文的概念）：

＆＃13;

$(document).ready(function() {
  var var1 = 2
  var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
    return parseInt(holidayText, 10) == var1;
  });
  //need this to adjust with table size
  var cell_width = element.width();

  var2 = 3;
  var width = var2 * cell_width;

  add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});

＆＃13;

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
  position: relative;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
  left: 0;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

如何获取宽度属性/指定一个新属性，这意味着此宽度与表/窗口大小成比例？我为此使用em吗？或者以百分比宽度？

由于

Answer 1

你必须使用$（window）.resize（）。

我更改了您的脚本并且它为我工作： https://fiddle.jshell.net/71rd84jy/

让我知道。欢呼声。

Answer 2

为什么首先使用js？

$(document).ready(function() {
  	var var1 = 2
	  var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
    	return parseInt(holidayText, 10) == var1;
  	});
    add_html = element.append('</br><span class="spanclass"></span>');
});

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
  position: relative;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
  left: 0;
  z-index: 1;
  position: absolute;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

注意box-sizing: border-box; - 它使宽度100％，包括2px的填充，否则它将是[2px] + [100％] + [2px]

使用jQuery更改窗口大小的对象宽度

2 个答案: