getBoundingClientRect
全部标签 背景:我目前正在开发一个项目,我的JS应用程序被嵌入到多个其他(父)JS应用程序中。某些父应用程序可以通过将display:block/none设置为包含我的应用程序的某些元素来显示/隐藏我的应用程序。其他父应用程序暂时从DOM中删除我的应用程序并稍后重新附加它。很少有父应用程序使用shadowdom,所以我无权访问父应用程序中的元素。我需要一种方法来检查我的应用程序是否可见(在DOM内并显示;不关心可见性:隐藏并且不必在视口(viewport)内),而不更改父应用程序,所以我调查了getBoundingClientRect。问题:至少在chrome上,getBoundingClien
考虑以下HTML(JSFiddlelink):catcatcat和CSS:.box{font-size:500%;}.rotate{transform:rotate(-90deg);}使用.getBoundingClientRect()测量元素id=a的宽度和高度$(a)[0].getBoundingClientRect().width$(a)[0].getBoundingClientRect().height给出(320,91)的维度。在元素id=b上测量相同的东西给出转置维度(91,320)。太棒了。但是,当我尝试测量元素id=c时,它只是将旋转嵌套在内部div中,我得到了原始尺寸
我正在尝试获取图像上鼠标单击的坐标。所以我像这样使用getBoundingClientRectfunctionshowCoords(canvas,event){varrect=canvas.getBoundingClientRect();varx=event.clientX-rect.left;vary=event.clientY-rect.top;console.log("x:"+x+"y:"+y);}但是我得到这个错误“canvas.getBoundingClientRect不是一个函数” 最佳答案 这意味着canvas变量实际
我有一个图像控件,我需要将一些元素放在图像控件的顶部。当我使用getBoundingClientRect()时,它在IE(7、8和9)中工作,但它在Firefox和Chrome中给出了不同的值。是否有任何其他函数可用于获取元素的边界矩形? 最佳答案 旧IE文档中对getBoundingClientRect的引用:“在Microsoft®InternetExplorer5中,窗口的左上角相对于真实客户端位于2,2(像素)处。”这似乎仍然有效。在IE9中使用将左上角“设置”到它的正确位置(0,0)。正如d4rkpr1nc3回答的那样,您
我在尝试确定DOM中元素的当前位置和大小时遇到了一些困难。我在屏幕右侧整理了一个片段来说明基于卡片的系统。我试图建立的行为是,当您点击其中一张卡片时,将添加另一张卡片(最终在下方,但现在在顶部),它会飞到屏幕的左上角在填充可用空间之前。d3.selectAll("attribute-card").on("click",function(d){varrect=this.getBoundingClientRect();varcard=d3.select("body").append("div").attr("class","card").style("background","tran
我无法找到使用这些函数的明确引用:getBBox()对比getBoundingClientRect()对比getClientRects()。您能否解释一下它们的作用以及它们返回的坐标(及其引用)是什么? 最佳答案 getBBox在SVGspecification中定义它在应用变换后返回本地坐标系中的坐标。getBoundingClientRect和getClientRects在CSSOMspecification中定义.它们的主要区别在于它们返回外部SVG坐标系中的坐标。getBoundingClientRect返回一个rect,它
我想要元素的Y坐标与Y值=0之间的精确距离,我认为这是文档的顶部。myElement.getBoundingClientRect().top;但是getBoundingClientRect()的值似乎在滚动时发生了变化。如何获得myElement和Y坐标=0(文档顶部)之间的实际距离? 最佳答案 这是因为getBoundingClientRect()获取的值是关于window的(仅页面的当前可见部分),而不是document(整页)。因此,它在计算其值时也会考虑滚动基本上,document=window+scroll因此,要获得my