获取计算高度 - Javascript - 不是 jQuery

2024-01-11

我有两个并排的 div 设置为自动高度。我希望它们具有相同的高度,因此我将它们组合为数组的成员。

我递归遍历数组并将最高的高度设置为最高的高度。问题是我尝试获取计算高度的所有操作都导致了错误的值。

我已经尝试过以下方法:

(els[x].currentStyle) ? h=els[x].currentStyle.height : h=window.getComputedStyle(els[x],null).height;

h =  el.clientHeight || el.offsetHeight || el.scrollHeight;

这两个结果都是 640 px'ish,而在我的特定显示中计算出的结果是 751.8。

是否有一个常数可以用来获得正确的高度。就像我得到的数字可能是在标准尺寸的屏幕上(比如 960 像素高等),然后乘以窗口尺寸?


我很好地利用了我想出的这个小功能

function getH(id)
{
    return document.getElementById(id).offsetHeight;
}
// I have a styles.js file where this function feels right at home. Access this function from anywhere.

这将返回给该函数的任何给定元素的高度(通过其 ID)。现在我们已经完成了 1/3。

然后使用 Math.max() 函数获取最大元素的高度。

var maxH = Math.max(getH("ID1"),getH("ID2")); 

这是 2/3,YAY - 现在将元素高度设置为相同。

var x = document.getElementById("ID1");
var y = document.getElementById("ID2");

x.style.height = maxH +"px";
y.style.height = maxH +"px";  //Remember the +"px" has to be added as a string, thats the reason for the "".

完毕!! - 现在把它们放在一起

我会想象这样的事情

function setElementHeight()
{
    var maxH = Math.max(getH("ID1"),getH("ID2"));
    var x = document.getElementById("ID1");
    var y = doc...("ID2");
    x.style.height = maxH +"px";
    y.style.height = maxH +"px";
}
// Don't forget to include the first function in you'r .js file

这会将两个 ID 设置为相同的高度,并且高度将等于最高的高度。这就是你想要的,不是吗?

--EDIT--

如果我是你,我就会扔掉阵列。只需让 2 个 DIV 各有一个唯一的 ID,并据此使它们高度相等即可。

  • Molle
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取计算高度 - Javascript - 不是 jQuery 的相关文章

  • 在 ajax 完成之前阻止提交

    我正在使用 jQuery 并且我希望在所有 ajax 调用完成之前表单提交不会起作用 我想到的一种方法是存储一个布尔值 该值指示是否有 ajax 请求正在进行 在每一个结束时它都会被设置为 false 我不确定这是否是最好的方法 所以我将不
  • 在 Web 浏览器中查找触发 then 事件的 jQuery 代码

    我加入了一个团队来从事一个项目 现在他们使用 jQuery 并且很多 javascript 文件都是外部文件而不是嵌入的 当我点击一个按钮时 它看起来就像 a class button cancel Cancel a 它触发一个在一个 ja
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 如何向 jQuery Tokeninput 添加占位符?

    如何将占位符添加到 jQuery Tokeninput 字段 一个正常的placeholder属性在这里不起作用 对于这样的输入
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • Flask wtf.quick_form 运行一些 javascript 并设置表单变量

    我正在创建博客文章 到目前为止已经使用普通的 html 表单完成了 我所做的一个有趣的想法是运行 javascript onclick 并使用页面中的额外数据在表单中设置一个隐藏变量 这很好地传递到服务器并通过 request form 获
  • 禁用 JavaScript 中的右键单击

    当我尝试禁用右键单击时 它不起作用 我尝试使用下面的代码 document onclick function e console log e button if e button 2 e preventDefault return fals
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • AJAX:检查字符串是否为 JSON?

    我的 JavaScript 有时会在这一行崩溃 var json eval this responseText 当争论时会导致崩溃eval 不是 JSON 在进行此调用之前有什么方法可以检查字符串是否为 JSON 我不想使用框架 有什么方法
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • ng-model 和值组合不适用于输入文本框

    我有两个输入文本框 我需要组合在两个文本框中输入的值并将其显示在第三个文本框中 如果我只使用value在第三个文本框中 Box 1
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • 如何通过哈希比较限制 API 密钥的使用

    我目前正在使用Spotify in my Android应用程序 但我需要使用Secret为了刷新令牌等等 我想传达我的秘密Backend到应用程序 因此秘密并不驻留在APK并且反编译时找不到 我读过很多关于保护应用程序中的秘密的内容 通过
  • RobotFramework:超出启动关键字的最大限制

    我是 RobotFramework 的新手 我正在尝试做一个简单的测试 使用 Log 关键字打印 Hello world 并从 java 类获取值 我在 Ride 上使用 jybot Settings Library robot MyTes
  • 是的,嵌套模式验证

    我正在尝试根据用户选择的选择选项有条件地验证对象 问题是我正在渲染货币列表 并且在尝试将其设为必填字段时遇到巨大困难 因为我必须传入一个空的对象开始 我的代码堆栈是 React Formik 和 Yup 所有最新版本 对象模式 catego
  • 防止同时触摸多个按钮

    在iOS中 是否有办法防止包含多个按钮 兄弟 的UIView同时被触摸 例如 可以通过两次触摸同时点击两个并排的不重叠按钮 设置 UIView exclusiveTouch
  • 如何为 Maven/Surefire 和 Eclipse 加载不同的 logback 配置

    我想在 Eclipse 和 Maven surefire 插件 中为我的单元测试使用不同的默认 logback 配置 基本上 我希望将测试期间生成的任何日志发送到 Eclipse 中的控制台或 Maven 的文件 目前 我有一个包含两个附加
  • Java Applet 中的背景图像

    如何在 Java Applet 中设置背景图像 假设我希望 background gif 成为我的 java applet 类中的背景 但我该怎么做呢 我认为没有一个函数可以做到这一点 但是您可以扩展一个Panel 它可以充当一个简单的组件
  • backbone.js 的跨浏览器如何?

    我们正在使用多种浏览器类型 网络 移动设备 平板电脑和智能电视 我们正在为我们的 mvc 寻找backbone js backbone js 是否有任何已知的跨浏览器限制 我认为这与 Backbone 关系不大 而与您使用的 HTML 和
  • 什么是陈旧状态?

    我在维基百科上阅读有关对象池模式的内容 http en wikipedia org wiki Object pool http en wikipedia org wiki Object pool 并且它提到 危险的陈旧状态 陈旧 状态到底是
  • Python 2 和 Python 3 中 exec 函数的行为

    以下代码给出了不同的输出Python2 and in Python3 from sys import version print version def execute a st b 42 exec b nprint b b format
  • 使用 npm 如何将包下载为 zip 格式,并将其所有依赖项包含在包中

    我想做的是下载包含所有依赖项的软件包 以便将它们传输到另一台没有互联网连接的计算机上并安装在那里 所以情况是 下载包 到 zip tarball 任何文件 而不安装它 下载的文件中包含其所有依赖项 正确的版本及其依赖项的依赖项 将文件传输到
  • Git:无法从一台计算机推送

    我的一位同事在他的机器上从 git 推送更改时遇到了问题 如果他登录到另一台机器 他可以很好地推送 但是从他的机器上 当他尝试推送时 他会收到以下错误 D Projects test1 best practices gt git push
  • 当有许多(数千个)SVG 元素时,为什么 D3.js 平移比缩放慢?

    当 svg 包含许多元素时 D3 js 平移似乎比缩放更慢且更不稳定 我在 JSFiddle 上做了一个例子http jsfiddle net cornhundred cfeu1ws2 10 http jsfiddle net cornhu
  • 如何将原始套接字绑定到特定端口?

    我目前正在从事一项编程任务 作业是实现客户端 网络模拟器和服务器 客户端将数据包传递给网络模拟器 网络模拟器将数据包传递给服务器 反之亦然 分配的前提是我只能使用原始套接字 所以我将创建自己的 IP 和 UDP 标头 我已经用wiresha
  • 使用where语句批量更新mysql

    如何批量更新mysql数据 如何定义这样的东西 UPDATE table WHERE column1 somevalues SET column2 othervalues 具有一些值 例如 VALUES 160009 160010 1600
  • webflux 请求处理程序中 ServerRequest 返回 null 主体

    我已经在 Spring WebFlux 应用程序中设置了身份验证 身份验证机制似乎工作正常 例如 以下代码用于设置安全Web过滤器链 Bean public SecurityWebFilterChain securityWebFilterC
  • AngularJS - 充当单选按钮的 3 按钮组

    使用离子框架 http ionicframework com 我正在尝试创建一组充当单选按钮的三个按钮 如果我点击早餐 我希望午餐和晚餐恢复到正常 白色 状态 早餐变成蓝色 使用我当前的代码 我无法让这个功能工作 尽管我可以让按钮稍微随机地
  • 如何为 groupby DataFrame 创建滚动百分比

    我正在尝试计算每种产品的每月变化百分比 这是我到目前为止所拥有的 我将其用于涉及单个产品的 DataFrame 我对如何将计算应用于包含许多产品和许多月份的结果集感到困惑 示例数据框 product desc activity month
  • 计算整个表的哈希值的最快方法[重复]

    这个问题在这里已经有答案了 我们需要能够计算外部环境的表哈希并将其与内部环境中预先计算的哈希进行比较 这样做的目的是确保外部环境中的数据不被 流氓 数据库管理员篡改 用户坚持这个功能 目前 我们通过计算每个列值的单独散列 对列散列执行位异或
  • python 全局名称“self”未定义

    刚开始学习 python 我确信这是一个愚蠢的问题 但我正在尝试这样的事情 def setavalue self self myname harry def printaname print Name self myname def mai
  • 获取计算高度 - Javascript - 不是 jQuery

    我有两个并排的 div 设置为自动高度 我希望它们具有相同的高度 因此我将它们组合为数组的成员 我递归遍历数组并将最高的高度设置为最高的高度 问题是我尝试获取计算高度的所有操作都导致了错误的值 我已经尝试过以下方法 els x curren