js获取Html元素的内容宽度 并动态设置盒子的宽度为内容宽度 + 30

在JavaScript中，你可以通过以下步骤来获取HTML元素的内容宽度，并将其增加30像素作为新的宽度：

1. 首先，你需要获取到你想要操作的HTML元素。假设这个元素是一个`<div>`，你可以使用`document.getElementById`, `document.querySelector` 或者 `.getElementById`、`.querySelector`等方法选择元素。例如：

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

2. 然后，你可以使用`element.innerText`或`element.textContent`来获取元素内的文本内容，这将返回文本而不会包括元素本身的宽度。如果需要获取包含子节点的宽度，可以使用`offsetWidth`属性：

var contentWidth = element.offsetWidth;

3. 最后，计算新的宽度并将其应用到元素上。添加30像素后，你可以直接设置元素的`style.width`属性：

var newWidth = contentWidth + 30; // 假设contentWidth不为0
element.style.width = newWidth + 'px'; // 设置新的宽度

完整示例：

// 获取元素
var element = document.getElementById('yourElementId');

// 获取内容宽度
var contentWidth = element.offsetWidth;

// 计算新宽度并应用
var newWidth = contentWidth + 30;
element.style.width = newWidth + 'px';