javascript如何获取div的class中设置的宽高度

javascript如何获取div的class中设置的宽高度,第1张

javascript获取div的class中设置的宽高度

高度(offsetHeight):

<head><title>用js获取div的高度</title></head>

<style  type="text/css">

#box{border:1px solid #ff0000;width:200px; }

</style>

<script language="javascript">

function jj(){

var pp=documentgetElementById("box")offsetHeight;

alert(pp);

}

</script>

<body>

<div id="box">

<p>段落内容</p><p>段落内容</p>

<input type="button" onclick="jj();" value="click">

</div>

</body>

宽度(offsetWidth):

<head><title>用js获取div的高度</title></head>

<style  type="text/css">

#box{border:1px solid #ff0000;width:200px; }

</style>

<script language="javascript">

function jj(){

var pp=documentgetElementById("box")offsetWidth;

alert(pp);

}

</script>

<body>

<div id="box">

<p>段落内容</p><p>段落内容</p>

<input type="button" onclick="jj();" value="click">

</div>

</body>

function AdjustColumnsHeight() {

    var mainCol = windowdocumentgetElementById('MainColumn');

    var leftCol = windowdocumentgetElementById('MainLeft');

    var rightCol = windowdocumentgetElementById('MainRight');

    var hMainCol =  mainCol offsetHeight;

    var hLeftCol = leftColoffsetHeight;

    var hRightCol = rightColoffsetHeight;

    var maxHeight = Mathmax( hMainCol , Mathmax(hLeftCol, hRightCol));

    mainColstyleheight = maxHeight + 'px';

    leftColstyleheight = maxHeight + 'px';

    rightColstyleheight = maxHeight + 'px';

}

上面的代码是取得3个div的高度,并判断高度最高的div高度值,让其余两个比较矮的div高度等于最高这个,自己琢磨下,很简单。

<html>

<head>

<title>js 获取div所填充内容的实际高度 </title>

</head>

<body>

<div id="div1">

百度知道是一个基于搜索的互动式知识问答分享平台,于2005年6月21日发布,并于2005年11月8日转为正式版。百度知道一直探索国际化发展,于2012年3月31日发布百度知道台湾版。

</div>

<button type="submit" onclick="test()">点击获取</button>

<script type="text/javascript">

function test() {  

        var oDiv = documentgetElementById('div1');  

        alert(oDivoffsetHeight);  

    }  

</script>

</body>

</html>

下面结合各上图介绍一下各个属性的作用:

一offsetTop属性:

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

返回值是一个整数,单位是像素。

此属性是只读的。

二offsetLeft属性:

此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。

三offsetWidth属性:

此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

四offsetHeight属性:

此属性可以获取元素的高度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

五clientWidth属性:

此属性可以返回一个元素的宽度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

六clientHeight属性:

此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

七scrollLeft属性:

此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。

返回值是一个整数,单位是像素。

此属性是可读写的。

八scrollTop属性: 

此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。

返回值是一个整数,单位是像素。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>test</title>

<style>

#div {

width: 100px;

height: 50px;

border: 1px solid red;

color: green;

text-align: center;

}

input {

width: 250px;

}

</style>

<script>

function test() {

var a = documentgetElementById('a');

var b = documentgetElementById('b');

var div = documentgetElementById('div');

divstylewidth = avalue + 'px';

divstyleheight = bvalue + 'px';

}

</script>

</head>

<body>

<div>宽度(默认100px):<input type="text" id="a" placeholder="输入想要的宽度,点击测试看效果" /></div>

<div>高度(默认50px):<input type="text" id="b" placeholder="输入想要的高度,点击测试看效果" /></div>

<div><button onclick="test()">点击测试</button></div>

<div id="div">来改变我</div>

</body>

</html>

js怎么获取div自适应高度值 然后赋值给另外的div

假设div根据浏览器大小改变时跟着自适应改变。

那么js就写在浏览器视窗改变时,获取div的高度值,然后赋值给需要的div。

浏览器改变的时候获取值或者改变值,是有对应的js方法的

求助,swift中怎么让UILabel自适应高度

第一 如果在Cell中用自动布局,拖好constrains,改变Cell的高度。

第二 如果是自己新增的,计算字串的高宽,然后改变frame,计算高宽用

我写的一个extension嘛

extension NSString {

func textSizeWithFont(font: UIFont, constrainedToSize size:CGSize) -> CGSize {

var textSize:CGSize!

if CGSizeEqualToSize(size, CGSizeZero) {

let attributes = NSDictionary(object: font, forKey: NSFontAttributeName)

textSize = selfsizeWithAttributes(attributes)

} else {

let option = NSStringDrawingOptionsUsesLineFragmentOrigin

let attributes = NSDictionary(object: font, forKey: NSFontAttributeName)

let stringRect = selfboundingRectWithSize(size, options: option, attributes: attributes, context: nil)

textSize = stringRectsize

}

return textSize

}

}

constrainedToSize 如果一行,用CGSizeZero,否则用CGSizeMake(你想要的宽度, CGFloat(MAXFLOAT)

swift中怎么让UILabel自适应高度

1、完成程式码:ctrl+\ 任何地方按下此组合键,均会提示相应的参考栏位;

2、错误提示:alt + enter 顾名思义,当系统报错时,按下此组合可以检视系统提示;

3、自动完成字串: ctrl+L ctrl+k 后者(Ctrl+L没用过)组合键自动打出字串,每按一次打出一个新串,串序自下向上;

4、右键:修复自动汇入

5、右键:格式化程式码风格

6、汇入所需包:ctrl+shift+i

7、格式化程式码:alt+shift+F

8、注释/取消注释:ctrl+/,此功能支援多行注释,但首先需选中所要注释行

9、psvm+Tab 生成Main方法

10、sout + Tab 生成输出语句

11、ctrl+enter 增加空白行,游标不移动;

12、alt+shift+F 格式,不太懂什么意思,高手可以解释下;

13、alt+enter 不太会用;

13、Alt+insert 插入程式码(包括建构函式,setter和getter方法等);

14、Alt+Shift+O 转到类;

15、Ctrl+Tab 在开启的原始档中进行切换;

16、Ctrl+O或Ctrlt+单击 转到源,即按住Ctrl键然后单击某源就可以开启原始码;

补充几条:

Shift+F6 运行当前程式

Ctrl+Shift+F5: 除错当前程式

Ctrl+F 快速查询程式码中的字串

Ctrl+Delete 也是一个比较常用的shortcut,大家可以试试;

Ctrl+Shift+Right 向右逐个选中

Ctrl+Shift+Left 向左逐个选中

Ctrl+Shift+UP/DOWN 复制当前行到下一行,游标不动

一个div怎么在另一个自适应高度的div垂直居中 两个div不是子父集关系

第一个div属性position:absolute;left:50%; :50%; margin-left:-(width/2);

margin-:-(height/2);注意第一个div高度宽度都应该是定值的;

意思是两个div的宽高都是用百分比设定的,那最好是让他俩有点父子关系,或者,第一个div只能是做成d窗显示的,居中在整个萤幕中央了

求获取div宽值赋值给高的JS程式码

<div height=40px width=70px onclick="gofuzhi(this)">点选我</div>

<script>

function gofuzhi(obj){

var wdth = $(obj)attr("width");

$(obj)attr('height', wdth);

}

</script>

测试的时候别忘记引入 jquery 档案

提问qml中的listview中的item怎么自适应高度

你设定放到listview里面的引用控制元件 例如你listview里面显示的是textview那么你就设定该控制元件高度就OK!

UIButton可以自适应高度吗,像UILabel一样

unbutton中有一个uilabel,可以进行设定

先算 button title 的高度,在设定button的frame 怎么样

<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> </DIV>

<BUTTON onclick="alert(oDivclientHeight)">client height</BUTTON>

<BUTTON onclick="alert(oDivoffsetHeight)">offset heightY</BUTTON>

这段代码你应该看得懂,这里你要搞清楚四个属性:

clientHeight:获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。

clientWidth:获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

详细的属性请参阅Dhtml手册

可以的呀。。

我这里都可以。。

<html>

<head>

</head>

<body>

<script type="text/javascript">

function createDiv(){

var div= documentcreateElement("div");

divid="testdiv";

divstylecssText="width=200;height=200;position='absolute';display:'block';border:1px solid #FFF000;background='#F6f6f6';";

divstyleleft="250px";

divstyletop ="250px";

divinnerText="test";

documentbodyappendChild(div);

}

function getSize(){

var obj = documentgetElementById("testdiv");

alert("高:"+objstyleheight);

alert("宽:"+objstylewidth);

}

</script>

<input type="button" value="生成DIV" onclick=createDiv() />

<input type="button" value="得到高宽" onclick=getSize() />

</body>

<html>

以上就是关于javascript如何获取div的class中设置的宽高度全部的内容,包括:javascript如何获取div的class中设置的宽高度、如何用js获取div的高度、js 获取div所填充内容的实际高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9503210.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存