js如何计算并赋予DIV高度_框架

js里面提供了很多的方法，可以计算DIV的高度，以及也可以给DIV直接复制。

如下是代码的实现：

<body>

</body>

var oDiv = documentgetElementById('div');

alert(oDivoffsetHeight); //这个就是获取DIV的高度

oDivstyleheight = oDivoffsetHeight + 100 + 'px'; //这个就是直接给DIV的高度赋值。

</script>

1、新建一个html文件，命名为testhtml。

2、在testhtml文件内，使用div标签创建一个模块，在div标签内，使用p标签创建一行文字，在p标签内，使用span标签创建一行文字。

3、在testhtml文件内，设置span元素的id为box，主要用于下面通过该id获得span对象。

4、在testhtml文件内，使用button标签创建一个按钮，按钮名称为“获得元素名称”。

5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getfu（）函数。

6、在js标签中，创建getfu()函数，在函数内，通过id(box)获得span对象，通过连续使用parent()获得span标签的父级的父级元素对象，再使用prop()方法获得该对象名称。最后，使用alert()方法输出元素名称。

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结构如下：

</div>

则对应的JS代码为：

var child1 = documentgetElementById('child1'),

child2 = documentgetElementById('child2');

var height = Mathmax(child1offsetHeight, child2offsetHeight);

child1parentNodestyleheight = height + 'px';

这个太简单了吧，先设置父元素，overflow：hidden;

收起的时候，height：0；

点开的时候 height：auto；

另外最好不要用绝对定位，这样会让布局更麻烦

哦，补充一下，如果还有爷爷级的话同样要给设置overflow：hidden;

应为这样才能形成BFC（块级格式化上下文）

不然的话会撑不开

首先通过js获取到当前img对象，可以使用documentgetElementById()的方式，然后通获取到的对象的parentElement属性指向的就是当前元素的直接父级元素。

// 获取到当前IMG对象

var obj = documentgetElementById("imgId");

// 获取到IMG对象的直接父级对象元素

var parentEl = objparentElement;

示例效果代码：

<html>

<head>

<meta >

有一个div，动态用js给div添加了一张表，现在点击table中的某一个td时，想要把这个div的id读出来~

请问有什么方法可以实现的？

HTML code

function loadFace()

{

face = documentgetElementById("faceContainer");

var strTable = "<table border= \"1\" cellpadding=\"0\" cellspacing=\"0\">";

var i,j,count;

count = 0;

for(i=0;i<7;i++)

{

strTable += "<tr>";

for(j=0;j<14;j++)

{

if(count <=95)

{

strTable += "<td><img src='Face/" + count + "gif' onclick=\"insertFace('"+count+"')\" alt=\"表情"+count+"\"/></td>";

}

else

{

strTable += "<td> </td>";

}

count++;

}

strTable += "</tr>";

}

strTable += "</table>";

faceinnerHTML = strTable;

}

在线等高手指点`

------解决方案--------------------

HTML code

function loadFace()

{

face = documentgetElementById("faceContainer");

[color=#FF0000]var tbID="myTable";[/color]

var strTable = "<table id=\""+myTable+"\" border= \"1\" cellpadding=\"0\" cellspacing=\"0\">";

var i,j,count;

count = 0;

for(i=0;i<7;i++)

{

strTable += "<tr>";

for(j=0;j<14;j++)

{

if(count <=95)

{

[color=#FF0000]strTable += "<td><img src='Face/" + count + "gif' onclick=\"insertFace('"+count+"','"+tbID+"')\" alt=\"表情"+count+"\"/></td>";[/color] }

else

{

strTable += "<td> </td>";

}

count++;

}

strTable += "</tr>";

}

strTable += "</table>";

faceinnerHTML = strTable;

}

------解决方案--------------------

HTML code

windowonload=function(){loadFace();};

function loadFace()

{

var face = documentgetElementById("faceContainer");

var strTable = "<table border= '1' cellpadding='0' cellspacing='0'>";

var i,j,count;

count = 0;

for(i=0;i<7;i++)

{

strTable += "<tr>";

for(j=0;j<14;j++)

{

if(count <=95)

{

strTable += "<td><img src='Face/" + count + "gif' onclick='insertFace("+faceid+")' alt='表情"+count+"'/></td>";

}

else

{

strTable += "<td> </td>";

}

count++;

}

strTable += "</tr>";

}

strTable += "</table>";

faceinnerHTML = strTable;

}

function insertFace(face){

alert(faceid);

}

</script>

------解决方案--------------------

windowonload=function(){loadFace();};

function loadFace()

{

var face = documentgetElementById("faceContainer");

var strTable = "<table border= '1' cellpadding='0' cellspacing='0'>";

var i,j,count;

count = 0;

for(i=0;i<7;i++)

{

strTable += "<tr>";

for(j=0;j<14;j++)

{

if(count <=95)

{

strTable += "<td><img src='Face/" + count + "gif' onclick='getFace(this)' alt='表情"+count+"'/></td>";

}

else

{

strTable += "<td> </td>";

}

count++;

}

strTable += "</tr>";

}

strTable += "</table>";

faceinnerHTML = strTable;

}

function insertFace(face){

alert(faceparentNodeparentNodeparentNodeid);

}

</script>

------解决方案--------------------

在jquery中非常的简单，一般是$("#id")parent()attr("id"); 就可以了

（转载）

以上就是关于js如何计算并赋予DIV高度全部的内容，包括:js如何计算并赋予DIV高度、如何撑开父元素，让父元素div自动适应高度的问题、如何用js获取div的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9478994.html

js如何计算并赋予DIV高度

发表评论

评论列表（0条）