获取元素左侧的像素Javascript似乎只有在窗口稍微调整大小时才起作用

Get pixels to the left of an element Javascript only seems to work when window is slightly resized

本文关键字：窗口 调整 起作用 小时 元素 像素 Javascript 获取      更新时间：2023-11-25

我现在已经更新了这个问题。在这次编辑之前，我已经解决了前面提到的大部分问题。以下是一些屏幕截图：

https://www.dropbox.com/s/o7zakvgi1emyzxk/Screen%20Shot%202015-02-14%20at%208.05.22%20PM.png？dl=0

https://www.dropbox.com/s/9a4wg8mwx7nj6p8/Screen%20Shot%202015-02-14%20at%208.05.30%20PM.png？dl=0

第一个链接显示了在调整窗口大小之前加载页面的样子（查看白色弹出窗口）。

第二个屏幕截图显示了页面加载后的页面外观，您可以调整窗口大小（查看白色弹出窗口）。

我正在努力实现第二个屏幕截图中的内容，但不必调整窗口大小就可以了（看看白色弹出窗口）。

这是我当前的代码：

CSS

对于白色弹出窗口内的所有按钮。

#optionsContainer * {
  font-size:.8em;
  background-color:#fff !important;
  border-radius:0px;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;
  color:#000 !important;
  border-top:2px solid #CBCBCB;
  width:200px;
  padding:8px;
  margin:0;
}

对于白色弹出窗口：

#optionsContainer
{
display:none;
background-color:#fff;
width:200px;
margin:0;
z-index:20;
position:absolute;
box-shadow:10px 10px 199px #000;
padding:0;
}

对于白色弹出窗口正上方的按钮（此按钮打开白色弹出窗口）：

#options
{
background-image:url("icons/options.png");
width:32px !important;
height:32px !important;
vertical-align:-12px;
}

HTML:optionsContainer（白色弹出窗口）：

<div id="optionsContainer" class="optionsContainer">
            <input type="button" class="optionsContainer" id="peopleButtonTrigger" onclick="alert('test');" value="Messages From These People">
            <input type="button" class="optionsContainer" id="settings" onclick="settings();" value="Settings">
            <input type="button" class="optionsContainer" id="logout" onclick="location='logout.html';" value="Logout">
            <input type="button" class="optionsContainer" id="slideShow" paused='true' onclick="setSlideShow();" value="Slide Show">
            <input type="button" class="optionsContainer" id="viewIntroductionSlideAgain" onclick="resetIntroductionSlider();" value="View Introduction">
            <input type="button" class="optionsContainer" id="deleteAccount" onclick="location='deleteAccount.html';" value="Delete Account">
            <input type="button" class="optionsContainer" id="aboutButton" onclick="showAbout();" value="About">
</div>

选项按钮（打开白色弹出列表）：

        <input type="image" src="icons/options.png" alt="options" id="options" onclick="document.getElementById('optionsContainer').style.display = 'block';">

正文标签：

<body id="body" onload="setOptionsListPosition();" onresize="setOptionsListPosition();">

Javascript（setOptionsListPosition（）；函数）：

function setOptionsListPosition()
    {
         var options = document.getElementById('options');
         var rect = options.getBoundingClientRect();
         document.getElementById('optionsContainer').style.left = Math.floor(rect.left)-200+32+'px';
         document.getElementById('optionsContainer').style.top = Math.floor(rect.top)+32+'px';
    }

如果你不理解，请提出任何问题。还有一个div，选项按钮被封装在里面，它有2%的填充，但我不知道这怎么会让它表现得那样。你能解释一下为什么会这样吗？非常感谢。

我想明白了。问题的原因是javascript函数同时被调用了两次，这导致浏览器出现混乱。为了解决这个问题，我对body标签进行了以下更改：

旧版： 

<body id="body" onload="setOptionsListPosition();" onresize="setOptionsListPosition();">

新增：

<body id="body" onload="setOptionsListPosition();" onresize="window.setTimeout(function(){setOptionsListPosition();}, 30);">

新版本等待30/1000秒，然后执行该功能。这很奇怪，当页面加载时，它似乎会触发onload事件和resize事件，即使从未发生过调整大小。如果有人能解释为什么会发生这种事，我愿意。非常感谢。

相关文章：