使用 javaScript 变量添加 css 属性？答案

【问题标题】：Using javaScript variable to add css property?使用 javaScript 变量添加 css 属性？
【发布时间】：2013-04-06 18:49:24
【问题描述】：

我需要能够计算 HTML 元素 (div) 的高度...

我正在使用这个 javaScript 代码来计算 CSS 并将其添加到我的“Wrapper”div 中：

var h=window.innerHeight;
var content=920;
var fix=920-h;
document.getElementById("wrapper").style.height= +fix+ 'px';

但它根本不起作用......

有什么帮助吗？

【问题讨论】：

document.getElementById("wrapper").style.height= fix + 'px';
我cannot reproduce的问题。
+ 符号表明 lolcat111 的点差挑战建议删除将停止 fix 在转换为字符串之前被转换为数字，因此它可以附加 "px"。由于它已经是一个数字，这不会产生实际影响，但会使代码稍微整洁一些，并为您节省一个字节。
你在哪里运行这个 JavaScript？ -- 如果它在你的<head> 中没有任何 domready/window.onload 包装器，那将是你的问题所在。

标签： javascript html css variables var

【解决方案1】：

您可能在加载正文之前运行此脚本。

要在主体加载完成后加载它，请将您的代码替换为：

window.onload = function(){
  var h=window.innerHeight;
  var content=920;
  var fix=920-h;
  document.getElementById("wrapper").style.height= +fix+ 'px';
}

【讨论】：

【解决方案2】：

document.getElementById("wrapper").style.height= fix + 'px';

会起作用的。

【讨论】：

由于这里唯一的变化是 fix 没有被转换为数字，所以我不明白如果原始代码没有这将如何工作。

【解决方案3】：

<script type="text/javascript">
  h=window.innerHeight;
  content=920;
  fix=(content-h);
  document.getElementById("wrapper").style.height=(fix + 'px');
</script>

我认为这就是您要寻找的，只要 div ID 包装器存在。

我认为更有效的方法是..

（使用 jQuery）

<script type="text/javascript">
  $(document).ready(function(){
    h=$(window).height;
    content=$('.content').height; //gets height of class content
    fix=(content-h);
    $('wrapper').height=fix;
  });
</script>

我的 2 美分。

【讨论】：

您的第一个解决方案不会产生影响，而且您的 jQuery 解决方案已被破坏......更不用说它会更有效的虚假声明。
加载时间可能效率不高，但编程时间。 jQuery 足够轻量级，不会对页面加载产生严重影响。除了
您的最佳解决方案不会有所作为，因为删除问题中的一元 + 运算符无济于事。在 jQuery 代码中使用 height 是不正确的，'wrapper' 选择器也是如此。并且 jQuery 不是轻量级的。肿了。