获取尚未添加到DOM的元素/CSS类的宽度,可以使用以下方法:
// 创建一个隐藏的元素
var hiddenElement = document.createElement('div');
hiddenElement.style.visibility = 'hidden';
hiddenElement.style.position = 'absolute';
// 将目标元素添加到隐藏元素中
var targetElement = document.createElement('div');
targetElement.className = 'target-class';
hiddenElement.appendChild(targetElement);
// 将隐藏元素添加到DOM中
document.body.appendChild(hiddenElement);
// 获取目标元素的宽度
var targetWidth = targetElement.offsetWidth;
// 从DOM中移除隐藏元素
document.body.removeChild(hiddenElement);
getComputedStyle
方法获取目标元素的宽度。// 创建一个目标元素
var targetElement = document.createElement('div');
targetElement.className = 'target-class';
// 获取目标元素的计算样式
var computedStyle = window.getComputedStyle(targetElement);
// 获取目标元素的宽度
var targetWidth = computedStyle.width;
需要注意的是,以上方法获取的宽度都是以字符串形式返回的,需要进行类型转换后才能进行计算。可以使用parseInt
方法将字符串转换为数字。
var targetWidth = parseInt(computedStyle.width);
在获取宽度时,可以使用CSS类的方式来设置样式,例如:
.target-class {
width: 200px;
}
推荐的腾讯云相关产品:
产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云