相关疑难解决方法(0)
获取div的非溢出部分的高度
假设我有一个包装器div,overflow:hidden上面有一个div,它位于可见部分的下方.如何获得内部div的可见高度？
<div id="wrapper" style="overflow: hidden; height:400px;">
<div id="inner">
<!--Lots of content in here-->
</div>
<div>
我尝试获取内部div的高度的每个方法都返回包括隐藏部分的完整高度,即2000px.我希望能够获得仅可见部分的高度,因此在此示例中为400px.
我知道我可以得到它的高度parentNode,但在生产中,内部div可能不是第一个孩子.因此可能有其他div将它们分开,因此高度#inner将为400 - 无论它与它之间的元素偏移如何#wrapper.
推荐指数
解决办法
查看次数
Javascript scrolIintoview平滑滚动和偏移
我的网站有这个代码
function clickMe() {
var element = document.getElementById('about');
element.scrollIntoView({
block: "start",
behavior: "smooth",
});
}
这工作得很好,但我有一个固定的标题,所以当代码滚动到元素时,标题是阻碍.
有没有办法有一个偏移,使其顺利滚动？
推荐指数
解决办法
查看次数
如何在AngularJS指令中获取元素的x和y位置
在指令的link函数部分中,我们可以访问该element对象.我想确定element对象是否在当前视口中/是否可用.
我目前有以下内容:
link: function (scope, element, attrs, controller) {
var page = angular.element(window);
page.bind('scroll', function () {
var windowScroll = page[0].pageYOffset,
windowHeight = page[0].innerHeight;
// elementScroll = element.xpos; - this is undefined?
// elementScroll = element.getBoundingClientRect().top - this does not work... undefined?
// elementScroll = element[0].getBoundingClientRect().top - this does not work... undefined?
// ... logic follows that if elementScroll is between windowScroll & windowScroll + windowHeight it is visible!
});
我似乎无法获得我的特定元素的x和y位置(该指令可能会重复多次).
请注意,我不打算在我的应用程序中安装或使用jQuery.
推荐指数
解决办法
查看次数
如何检测网页上的空白区域
有没有办法使用JavaScript检测网页中没有文本或图像的空白区域？
更准确地说,如何确定点[x,y]是否在空白区域内,如下例所示(以红色标记)
编辑:我想让我的问题更清楚,我正在构建一个扩展,它应该将搜索结果标记为值得信赖或垃圾邮件,我想将我的标记放在结果项URL的文本末尾.我也希望以通用的方式进行,因此它不仅适用于Google网页.一个例子如下所示:
推荐指数
解决办法
查看次数
HTML元素的完美重叠？
是否有可能编写一个给出任何HTML元素(在屏幕上可见)的JavaScript函数,它会创建另一个HTML元素来叠加在它上面(以便覆盖它)？然后,如果我调整页面大小,它就会像它所覆盖的组件一样移动.
(例如,如果我使用getBoundingClientRect,如果原始组件的宽度以百分比表示,则它将无法工作)
该函数应处理任何情况:元素(在输入中)是否具有边距,填充,边框,其显示是块还是内联等等.
我尝试添加一个位置:相对于父组件,然后在"cover"组件上创建一个position:absolute.这不起作用,因为它不处理填充或边距等情况.
注意:没有jQuery.如果可能的话,纯粹的"跨浏览器"JavaScript
推荐指数
解决办法
查看次数
如何在没有jquery的情况下获得固定元素的位置？
你好
我有一个固定位置的元素,我无法检测位置,必须清楚地使用javascript,没有框架(jquery,mootools等).
推荐指数
解决办法
查看次数
如何使用 JavaScript 获取元素的网格坐标？
假设我有一个 3 列的 CSS 网格。有没有一种方法，使用JavaScript，以获得grid-row和grid-column自动放置元素？
例子：
console.log($('#test').css('grid-row'), $('#test').css('grid-column'));
// expected output: 2 3
// actual output: two empty strings
.grid {
display: grid;
grid-template-columns: repeat( 3, 1fr);
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test"></div>
<div></div>
<div></div>
<div></div>
</div>
这是示例的 JSFiddle：https ://jsfiddle.net/w4u87d2f/7/
在这个例子中，我可以通过计算元素并知道网格有三列来计算：
grid-column = $('#test').index() % 3 + 1;
grid-row = Math.ceil( $('#test').index() / 3 )
但这仅适用于非常简单的网格，也意味着我必须考虑更改列数的断点。
编辑：这不是Retrieve the position (X,Y) of an HTML element的副本，因为我对像素坐标不感兴趣，但对 CSS-Grid 中的行号和列号不感兴趣。
推荐指数
解决办法
查看次数
如何使特定的元素变暗
我正在构建一个谷歌浏览器扩展程序,我在右侧做一些工作(在我的朋友故事中),事实上,我正在搜索特定的朋友故事,其名称出现在输入元素中,然后单击按钮.我需要调暗/变暗图片中黑色边框中出现的所有其他元素,除了正确的元素,直到他按下X按钮
我不知道如何到达除了一个以外的所有其他元素!:(
图片:
推荐指数
解决办法
查看次数
Javascript:单击body中的任何位置,除了其中的一个元素
我想能够点击身体内的任何地方,除了一个特定的元素.我无法找出我所做的代码有什么问题.
当我点击.except里面的一个特定元素时body,我不希望它隐藏但是当我点击body它时应该隐藏.
HTML
<html>
<head>
<title>Click anywhere except that specific element</title>
</head>
<body id="wrapper">
<center>
<div id="except"></div>
</center>
</body>
</html>
JS
var body = document.getElementById('wrapper');
var except = document.getElementById('except');
if(body.addEventListener)
body.addEventListener("click", function(){bodyClick("yes")}, false);
else
body.attachEvent("onclick", bodyClick);
function bodyClick(clicked){
except.addEventListener("click", exceptClick,false);
function exceptClick(){
bodyClick("no");
if(clicked === "yes")
except.style.display = "none";
}
if(clicked === "yes")
except.style.display = "none";
else
except.style.display = "show";
}
任何帮助表示赞赏.原谅我格式不正确(这是我在这里的第一篇文章).谢谢!
推荐指数
解决办法
查看次数
如何在componentDidMount()中获取ReactJS元素？
我有4个特定React类的实例.在componentDidMount()我想存储每个实例的y位置之后.
如何处理渲染元素？我不能使用classname,因为我有4个具有不同位置的同一个类的元素.
我的ReactJS组件:
const Col = React.createClass({
componentDidMount: function() {
//here address the actual rendered col-instance
},
render() {
return (
<div className='col'>
</div>
);
}
});
推荐指数
解决办法
查看次数