CSS：将元素的宽度设置为（由浏览器计算的宽度）+（20px）答案

【问题标题】：CSS: Set width of an element to (width calculated by browser) + (20px)CSS：将元素的宽度设置为（由浏览器计算的宽度）+（20px）
【发布时间】：2015-10-14 06:15:29
【问题描述】：

我正在尝试使用 CSS 设置元素的宽度。

我需要将元素的宽度设置为浏览器计算的宽度+20px。

我需要这样做：width: auto + 20px;

关于如何正确编写这个的任何想法？谢谢！

JS 小提琴：http://jsfiddle.net/3YCnW/

【问题讨论】：

你不能只添加 20px 的内边距吗？
在这种情况下不能使用填充。我添加了这个额外的 20 像素，因为稍后将使用 JS 将更多文本添加到元素中。 20px 是为了容纳这个文本。如果我使用填充，它不会达到目的。
计算出来的？？你的意思是浏览器的宽度？
@Danko：我指的是设置 CSS 时浏览器计算的元素宽度width:auto;
好的，你需要 Jquery 或纯 javascript

标签： css browser width

【解决方案1】：

你可以使用display: block;和width: calc( 100% + 20px );...不需要JS

请看这里：http://jsfiddle.net/3n1gm4/muFH3/

【讨论】：

就像一个魅力！这就是我一直在寻找的。没有意识到这里指定100% 类似于auto
我收回了...设置display: block 会导致我之前没有意识到的不良结果。见：JSFiddle http://jsfiddle.net/muFH3/1/

【解决方案2】：

使用 Jquery 你可以做到这一点：

$(document).ready(function () {
  var w = $('div').width()+20+'px';
  $('div').css('width',w);
})

演示http://jsfiddle.net/H2enB/

并且使用纯 Javascript

var w = document.getElementById('myDiv').offsetWidth + 20 +"px";
document.getElementById('myDiv').style.width = w;

演示http://jsfiddle.net/E9x95/5/

【讨论】：

需要对页面上的所有td 元素执行此操作。这怎么能在纯 JS 中完成。谢谢
我已添加此代码。我相信有人必须对其进行同行评审。

【解决方案3】：

在javascript中：

var element = document.getElementById('my_element_id');

element.style.width = (parseInt(element.offsetWidth) + 20)+"px";

【讨论】：