JQuery 设置元素的高度和宽度相等

有时需要设置下面的情况,即 <div> 的高度和宽度是相等的、并且随着屏幕的大小变化而变化。这样就需要用 js 来控制元素在页面上的显示。

<html>

<body>

<div class="row text-center margin-top-20p">

<div class="col bgcolor-FF9600 border-radius-5p margin-2p height-width">

<p class="white">你是</p>

<p class="white" ng-bind="userLever.name"></p>

</div>

<div class="col bgcolor-FECA14 border-radius-5p margin-2p height-width" ng-if="userLever.discount != 10">

<p class="white">享受</p>

<p class="white">{{userLever.discount}}折</p>

</div>

<div class="col bgcolor-FECA14 border-radius-5p margin-2p height-width" ng-if="userLever.discount == 10">

<p class="margin-top-20p white">不享受</p>

<p class="white">折扣</p>

</div>

<div class="col bgcolor-A5D600 border-radius-5p margin-2p height-width">

<p class="white">加入时间</p>

<p class="white" ng-bind="addTime"></p>

</div>

</div>

<body>

</html>

<script type="text/javascript">

//设置元素的高度

var height = $(".height-width").width();

$(".height-width").css("height",height );

$(".height-width-child").css("height",height );

$(".height-width p:first-child").css("margin-top",Math.ceil(height/4)+"px");

$(".height-width-child p").css("line-height",height+"px");

</script>

时间: 2024-11-10 11:36:20

JQuery 设置元素的高度和宽度相等的相关文章

JQuery+Js 获取浏览器高度和宽度

JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括bor

jquery设置元素readonly与disabled属性的方法

分享下jquery设置元素readonly与disabled属性的方法,设置元素的显示与隐藏,元素的只读属性. 以下内容转自:http://www.jbxue.com/article/15102.html 略作修改与补充. Jquery的api中提供了对元素应用disabled和readonly属性的方法: 1,设置readonly属性 $('input').attr("readonly","readonly")//将input元素设置为readonly $('in

如何自动在html页面加载时动态改变div等元素的高度和宽度

这里需要用到jquery + css.原理是在页面加载时用javascript去动态改变一个class的高度和宽度.这样结合javascript能动态获取浏览器/页面的高度和宽度,从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比.下面的代码创建一个手机页面,每一行三个图片分占33%,每个图片div的高和宽会随着浏览器的大小变化而自适应. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"

js/jquery设置元素隐藏和显示

//js 元素隐藏 document.getElementById('li11').style.display = 'none'; //js 元素显示 document.getElementById('li11').style.display = 'block'; //jquery元素隐藏 $('#li11').hide(); //jquery元素显示 $('#li11').show(); //还有一种方法,在css中设置 .hide{ display: none; } 然后通过js $('#l

javascript、jquery获取网页的高度和宽度

javascript: 可视区域宽 :document.documentElement.clientWidth  (width + padding) 可视区域高 :document.documentElement.clientHeight (height + padding) 可视区域宽: document.body.offsetWidth (包括边线的宽: width + padding + border) 可视区域高: document.body.offsetHeight (包括边线的高:h

jquery设置元素的readonly和disabled

(转) Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: 1.readonly   $('input').attr("readonly","readonly")//将input元素设置为readonly   $('input').removeAttr("readonly");//去除input元素的readonly属性     if($('input').attr("readonl

jquery 设置元素内容html(),text(),val()

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>wrap</title> 6 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></scrip

纯Javascript获取一个元素的高度和宽度

纯Javascript脚本获取元素样式 一,问题描述 有时候,我们需要做一些页面让其中的元素按照不同的显示器而自适应,那么怎么计算这个元素的margin-top呢,我相信大家都会计算,那么涉及到其中的一个就是使用JS去获得这个元素的样式,比如说高度 二,解决方案 我们都知道,对于一个HTML页面元素来说,它的样式定义有两种方式,一种是写在元素的同行节点,俗称行内样式,另外一种则是定义在外部的CSS文件中,俗称外部样式,也就是这两种定义方式,导致我们获取高度的方式有所差异,详见以下表格 var o

使用jQuery设置元素选中的问题及解决办法

现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做"全选"的时候很有用),还有就是某些时候的多选模式下的select的option的选中. 前段时间,公司开始了一个项目,里面就用到了jquery和jquery-ui,里面正好就有"全选"功能和多选模式的select,下面就来说说这里面遇到的坑. 由于要兼容IE10的版本,所以只能用1.X的版本,然后又用了jquery-ui,所以最终定