element的height与width

关于一个element所有的高度宽度

  1. ele.style.width,ele.style.height:操纵style样式。+"px"
  2. offsetWidth、offsetHeight:获取对象相对于文档或者父元素offsetParent的宽度和高度,包含内边距、滚动条、边框。不包含外边距。
    clientWidth、clientHeight:获取对象在窗口中所占的宽度和高度。只包含内边距。对于滚动部分不予计算。
    scrollWidth、scrollHeight:是指元素的内容区域加上它的内边距和它的任何溢出部分,正好比clientWidth、clientHeigth多出溢出的部分。

    offsetTop、offsetLeft:获取元素相对于文档或者父元素offsetParent的上、左坐标。
    clientTop、clientLeft:一般而言没有意义,表示上边、左边的滚动条和边框的坐标。
    scrollTop、scrollLeft:获取元素溢出的上边、左边距离。

注意:关于clientHeight,对于html元素来说,clientHeight is special,它返回浏览器可视区域的高度,不管页面有多高。http://help.dottoro.com/ljcadejj.php

关于获取浏览器高度的兼容写法见: http://www.cnblogs.com/fengzekun/p/3909557.html

转载于:https://www.cnblogs.com/teazean/p/4619500.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: CSS中的计算属性calc()可以实现根据宽度来计算高度。calc()函数可以用于设置元素的宽度、高度、内边距、外边距等属性的值。 calc()函数可以使用加法(+)、减法(-)、乘法(*)和除法(/)进行运算。也可以和px、百分比(%)等单位进行运算。 例如,要设置一个元素的高度等于宽度减去100像素,可以使用如下代码: ```css .element { width: 300px; height: calc(100% - 100px); } ``` 在上述代码中,height属性使用了calc()函数来计算高度。计算过程是100%(父元素高度)减去100px,结果即为元素的实际高度。 通过使用calc()函数,可以根据宽度来动态计算元素的高度,使得页面在不同尺寸的屏幕上都能够适配和展示良好的布局。 ### 回答2: CSS的calc()函数是一种用于计算CSS属性值的方法。在使用calc()函数时,我们可以使用数学表达式来进行计算,以便根据具体的条件来确定属性的值。在这个问题中,您希望根据给定的宽度值来计算高度值。 要使用calc()函数来计算高度,您可以将calc()函数应用于CSS的height属性。具体步骤如下: 1. 首先,确定给定元素的宽度值。例如,假设宽度值为200px。 2. 在计算高度之前,确保已经确定了该元素的所有其他相关属性,例如padding、border等。因为这些属性会影响到最终的计算结果。 3. 使用calc()函数来计算高度。假设我们想要将高度值设置为给定宽度值的两倍。那么可以使用如下的CSS代码: ``` height: calc(2 * 200px); ``` 这样,就可以根据给定的宽度值来计算出高度值,即400px。 需要注意的是,calc()函数中的数学表达式可以包含不同的单位(如px、em等),也可以进行加减乘除等操作。这样,您可以根据具体的需求来进行计算,并动态地设置属性值。 另外,还需要考虑浏览器的兼容性。calc()函数在大多数现代浏览器中都得到了支持,但对于较旧的浏览器版本可能存在兼容性问题。因此,在使用calc()函数时,最好进行兼容性测试,并根据实际需求来选择合适的解决方案。 ### 回答3: CSS中的calc()函数可以根据一个元素的width属性值来计算height属性值。这个函数可以用于动态地设置一个元素的高度,而不需要事先固定一个具体的数值。 使用calc()函数的格式为:calc(计算表达式),其中计算表达式可以包含各种数值、操作符和单位。 举个例子,如果我们想设置一个元素的高度为其宽度的一半,可以使用如下的CSS代码: ```css .element { width: 200px; /* 假设宽度为200px */ height: calc(50% * var(--width)); /* 通过计算表达式设置高度 */ } ``` 在这个例子中,calc()函数的计算表达式为"50% * var(--width)",其中"50%"表示宽度的50%(即一半),而"var(--width)"表示一个自定义的变量,它的值为元素的宽度,使用var()函数可以引用该变量。因此,最终的高度会根据宽度的大小动态计算出来。 需要注意的是,使用calc()函数设置高度时,要确保计算表达式的数值和单位是相匹配的,否则会导致计算结果错误。另外,calc()函数只能用于CSS中数值属性的计算,无法用于其他属性的计算。 总结来说,CSS中的calc()函数可以根据width属性值来动态计算height属性值,通过定义一个计算表达式来实现高度的自适应调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值