Javascript 有没有一种方法可以根据内容的大小（可能会有所不同）来扩展div？

我在我们的SharePoint网站上创建了一个员工聚光灯Web部件，该部件在每次页面加载时随机选择一名员工。聚光灯部分是从用户信息列表的“关于我”部分提取的员工的个人简历。我正试图使它，使生物是可扩展的，使一些行的生物是初步可见，然后用户可以点击一个'更多'的链接，以扩大文本出来阅读其余。我所做的工作很有效，但我让它跳到一个固定的高度，我希望它只向下扩展到

分区组：

<div id=\"expandable\" >" + Employees[randId].aboutMe +
                "</div><a href=\"javascript:Tog()\">more...</a>

要展开的简单脚本：

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height == '400px') {
        expandable.style.height = '55px';
    }
    else {
        expandable.style.height = '400px';
    } 
}

有没有更好的方法来扩展内容，同时在折叠时仍能显示部分文本？

以下是我在评论中所说的一些内容。默认情况下，div会占用其内容所需的任何空间。通过将

short

类添加到元素中，可以将其限制为维度。toggle函数只是添加和删除这个类

HTML

JS

以下是我在评论中所说的一段话。默认情况下，div会占用其内容所需的任何空间。通过将

short

类添加到元素中，可以将其限制为维度。toggle函数只是添加和删除这个类

HTML

JS

---

不要设置高度以显示整个内容，而是删除设置了最大高度/溢出的类

HTML

<div id="content" class="collapsed">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

JavaScript

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

JavaScript是一个基本示例，最好使用添加/删除类库，这样您就可以拥有多个类

示例

---

不要设置高度以便显示整个内容，而是删除设置了最大高度/溢出的类

HTML

<div id="content" class="collapsed">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

JavaScript

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

JavaScript是一个基本示例，最好使用添加/删除类库，这样您就可以拥有多个类

示例

---

不要将高度设置为固定值，只需将其设置为

auto

，div将展开以适合内容：

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}

（）

---

<强>更新< /强>：还考虑用适当的事件侦听器替换您的内联JS（<代码> HRFF＝“JavaScript：To（））< < /代码>，如：

，而不是将高度设置为固定值，只需将其设置为<代码> Audio，DIV将展开以适合内容：

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}

（）

---

---

<强>更新< /强>：还考虑用适当的事件侦听器替换内联JS（<代码> HRFF＝“JavaScript：To（）），如：

删除高度和溢出属性，它将扩展到适合于内容的自动化。不幸运，它做的是在顶部和右侧放置滚动条。我不希望发生这种情况。它有固定高度的父容器吗？@Spacemancraig不应该发生，除非其他css使用溢出设置其宽度和高度：滚动div在默认情况下可以在高度上展开。或者您得到了一个具有固定高度/宽度和溢出集的父div。发布更多代码将高度设置为

auto

：

expandable.style.height='auto'

。删除高度和溢出属性，它将自动展开以适应内容。不幸的是，它不会将滚动条放在顶部和右侧。我不希望发生这种情况。它有固定高度的父容器吗？@Spacemancraig不应该发生，除非其他css使用溢出设置其宽度和高度：滚动div在默认情况下可以在高度上展开。或者您得到了一个具有固定高度/宽度和溢出集的父div。发布更多代码将高度设置为

auto

：

expandable.style.height='auto'

。我将其设置为空值，而不是

“55px”

，然后应用样式表中的值。但是+1对于

auto

@Bergi，如果我这样做了，那么当他们再次单击“更多”链接以折叠时，它是否仍会折叠回

55px

？@Bergi Nice，代码（稍微）更改为这样做。在答案的末尾保留了你的小提琴的链接。很高兴知道。尽管它在InternetExplorer8中似乎不起作用，但不幸的是，我们的大多数员工都在一台只运行IE8的终端服务器上。我们将在年底进行升级，但目前我仍然需要使用内嵌JS。再次感谢各位@Spacemancraig IE8及以下版本需要略微不同的语法：

document.attachEvent（'onclick'，function（e）{/*…*/}）

。跨浏览器代码通常会执行

如果（document.addEventListener）{/*addEventListener code*/}或者{/*attachEvent code*/}

，我会将其设置为空值，而不是

“55px”

，那么将应用样式表中的值。但是+1对于

auto

@Bergi，如果我这样做了，那么当他们再次单击“更多”链接以折叠时，它是否仍会折叠回

55px

？@Bergi Nice，代码（稍微）更改为这样做。在答案的末尾保留了你的小提琴的链接。很高兴知道。尽管它在InternetExplorer8中似乎不起作用，但不幸的是，我们的大多数员工都在一台只运行IE8的终端服务器上。我们将在年底进行升级，但目前我仍然需要使用内嵌JS。再次感谢各位@Spacemancraig IE8及以下版本需要略微不同的语法：

document.attachEvent（'onclick'，function（e）{/*…*/}）

。跨浏览器代码通常执行以下操作：

if（document.addEventListener）{/*addEventListener code*/}else{/*attachEvent code*/}

。

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}