javascript - 宽度基于百分比高度的方形 div

标签 javascript jquery html

我正在尝试做这个 fiddle 的逆操作,制作一个宽度基于 100% 高度的正方形。

http://jsfiddle.net/j372H/6/

<html  style="height:100%">
<body style="height:100%">
<div id="square" style="background-color:black"></div>
</body>
</html>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.width();

square.css('height',size);
}

非常感谢您的帮助。

七月。

最佳答案

在 CSS 中也可以设置 div 的高度

<style>

html,body,#square { height:100%; }

</style>

然后你的js函数反过来

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

由 wared 提供的演示 - jsfiddle.net/wared/spSLP - 不错,wared

关于javascript - 宽度基于百分比高度的方形 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20936061/

相关文章:

javascript - Webback list 文件未编译为 es5

javascript - getJson 键/值参数作为变量语法问题

javascript - 从窗口中心向右打开窗口一半大小的面板

jquery - 使用 jquery ajax 的 HTML5 文件上传 formdata

html - 纯 CSS 对话框动画不适用于 dialog.close()

html - 移动到响应和返回后 Div 不能正确 float

jquery - 在 HTML 字符串中查找元素

c# - 如何获取单选按钮列表的文本?

javascript - 无法访问Javascript变量: undefined

jquery - 使用 jQuery 尝试菜单切换时没有任何反应