火狐的firebug中，有一个样式表的选项，里面有一个事dom，里面会吧该标签的所有属性和方法列出来，你可以看看。
宽度在计算出来的样式里面，有width和height，如果不行，你可以读取attr("width")和attr("height")看看。
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
documentbodyclientWidth
documentbodyclientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
documentbodyclientWidth
documentbodyclientHeight
可是IE和FireFox则使用
documentdocumentElementclientWidth
documentdocumentElementclientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部
表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了
先自定义监听方法吧，如下：
现在组件内注册
directives方法跟data，methods方法是平级的
需要监听的组件绑定这个方法，这里是监听表头的高度
这时就已经监听到的表头的宽高变化了，就可以拿出来用了
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
function printOut(DomName) {
consolelog("正在帮您导出")
//title，随意设置，也可以提出来做参数，传入进来，自己发挥
var title = '测试啊';
var that = this;
var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象
//打印看有没有获取到dom
consolelog(shareContent)
var width = shareContentoffsetWidth; //获取dom 宽度
var height = shareContentoffsetHeight; //获取dom 高度
var canvas = documentcreateElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvaswidth = width scale; //定义canvas 宽度 缩放，在此我是把canvas放大了2倍
canvasheight = height scale; //定义canvas高度 缩放
canvasgetContext("2d")scale(scale, scale); //获取context,设置scale
html2Canvas(DomName, {
//允许跨域的加载
useCORS: true,
})then(function (canvas) {
var context = canvasgetContext("2d");
// 重要关闭抗锯齿
contextmozImageSmoothingEnabled = false;
contextwebkitImageSmoothingEnabled = false;
contextmsImageSmoothingEnabled = false;
contextimageSmoothingEnabled = false;
var imgData = canvastoDataURL('image/', 10); //转化成base64格式,可上网了解此格式
var img = new Image();
imgsrc = imgData;
imgonload = function () {
imgwidth = imgwidth / 2; //因为在上面放大了2倍，生成image之后要/2
imgheight = imgheight / 2;
imgstyletransform = "scale(05)";
if (thiswidth > thisheight) {
//此可以根据打印的大小进行自动调节
var doc = new JsPDF("l", "mm", [
thiswidth 0555,
thisheight 0555
]);
} else {
var doc = new JsPDF("p", "mm", [
thiswidth 0555,
thisheight 0555
]);
}
docaddImage(
imgData,
"jpeg",
10,
0,
thiswidth 0505,
thisheight 0545
);
docsave(title + "-文件pdf");
consolelog("倒数3秒导出啦")
};
});
}
//导出方法
export {
printOut
}
这种方法是对的，不过前提是：你必须有足够权限访问 iframe Docuemnt —— 同域
例如，indexhtml 和 my_framehtml 都在同一域名下，或都在桌面，这样可以
但如果你把 iframe 的 src 换为百度网址，就会出现类似下面的错误
Permission denied to access property 'getElementById'
无权访问 'getElementById' 属性
如果你的情况是后者，那就没有解决办法。如果是前者，可能你的代码中有错误。
canvaswidth获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>
这时我们获取的canvas的宽度值是800px;但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvaswidth获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）
以上就是关于jquery如何获得宽度为百分比的元素的宽度全部的内容，包括:jquery如何获得宽度为百分比的元素的宽度、html常见宽高、vue使用自定义指令监听Dom元素宽高变化等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）