根据元素高度动态添加/删除类

根据元素高度动态添加/删除类是指根据元素的高度变化来动态地添加或删除CSS类。这种技术通常用于响应式设计或根据特定条件改变元素的样式。

动态添加/删除类的主要目的是通过改变元素的类来改变其样式或行为。通过添加或删除类，可以实现元素的动画效果、布局调整、交互效果等。

下面是一个示例代码，演示了如何根据元素高度动态添加/删除类：

<!DOCTYPE html>
<html>
<head>
<style>
    .tall {
        background-color: yellow;
    }
    .short {
        background-color: green;
    }
</style>
</head>
<body>

<div id="myDiv" class="short">
    This is a div element.
</div>

<script>
    var myDiv = document.getElementById("myDiv");

    function updateClass() {
        if (myDiv.offsetHeight > 200) {
            myDiv.classList.remove("short");
            myDiv.classList.add("tall");
        } else {
            myDiv.classList.remove("tall");
            myDiv.classList.add("short");
        }
    }

    // 监听窗口大小变化
    window.addEventListener("resize", updateClass);

    // 初始调用一次
    updateClass();
</script>

</body>
</html>

在上面的示例中，我们定义了两个CSS类：.tall和.short，分别表示元素高度较高和较低时的样式。通过JavaScript代码，我们获取了myDiv元素，并定义了updateClass函数来根据元素的高度动态添加/删除类。在窗口大小变化时，我们调用updateClass函数来更新元素的类。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于运行各种应用程序。
腾讯云云数据库 MySQL 版：提供高性能、可扩展的云数据库服务，适用于各种规模的应用程序。
腾讯云云函数（SCF）：无服务器计算服务，帮助开发者构建和运行云端应用程序。
腾讯云对象存储（COS）：提供安全、可靠、低成本的云存储服务，适用于存储和处理各种类型的数据。

请注意，以上仅为示例推荐，实际选择产品时应根据具体需求进行评估和选择。

根据元素高度动态添加/删除类

、、

我有一个需要根据其子p标记的高度更改高度的元素： <p>Lorem ipsum dolor sit ametDonec</p>如果段落超过一定的高度，我已经通过添加一个类实现了所需的更改： var divheight = $("#eventpg

浏览 4提问于2016-09-14得票数 1

2回答

在angular10中从角ts文件中添加类和样式属性

、、、、

我必须将一个类添加到一个div中，在这个类中单击一个按钮，同时添加一个with属性。类将有一个属性高度，每次都根据div的高度动态计算。我不想向div元素添加样式属性。我想要添加一个具有高度属性的类。

浏览 3提问于2022-02-03得票数 0

2回答

此选择器在超时内不起作用

、

得到了一个隐藏的div，它必须在几秒钟的延迟后显示出来，并根据它的高度获得一个样式。这些隐藏的div是动态的。所以，他们每个人都有一个独特的高度。找不到隐藏的div的高度，所以，我在删除隐藏元素的类之后添加了高度计算。现在，当我使用实际的类或删除超时时，脚本似乎可以工作。

浏览 54提问于2018-12-21得票数 0

回答已采纳

1回答

如何用YUI3恢复元素的原始高度？

、、

我有一个HTML元素，它有一个用来设置高度的类： height: 100px;我根据一些条件以编程方式更改元素的高度，如下所示：在某些情况下，我希望将其高度恢复为.myelem类设置的原始值。如果元素的高度设置为s

浏览 0提问于2013-05-25得票数 0

2回答

如何在嵌套子程序添加/删除时使祖先高度在每个级别上自动更改

、、

在我正在进行的当前项目中，我需要能够使用jQuery动态添加多个级别的可排序嵌套列表。我有嵌套的可排序列表按需要工作，但我遇到的问题是，父母的下一个兄弟姐妹在视觉上重叠以前父母兄弟姐妹的后代，如所见 "jquery如何在嵌套子程序添加/删除时使祖先高度在每个级别上

浏览 3提问于2014-04-23得票数 0

回答已采纳

1回答

基于可见的子级更改容器高度(使用Jquery)

我目前有一个父元素，它的子元素的位置是绝对的。这本质上破坏了父元素的高度，我想根据当前显示的子元素重新添加高度(所有子元素都有不同的高度)。of 500px</div></div> 我已经准备好了JQuery，当你按下其中一个按钮时，它会

浏览 14提问于2017-06-30得票数 1

回答已采纳

1回答

动态高度可见的动画元素

、、

我知道如何使用css动画元素。但是，我正在尝试设置jQuery，以便当用户向下滚动css动画效果时被激活。所以基本上添加到元素类中。我知道如何根据设定的高度来做这件事，但是我有一些动态的内容，在大小和高度上都会发生变化。随着身高的变化，我该怎么做呢？ });更

浏览 2提问于2014-01-27得票数 1

回答已采纳

4回答

保持2div之间的距离不变

、、、

} { position:relative; } 类为“页脚”的div必须始终位于底部，动态高度与页脚div之间的距离应始终为10 i

浏览 3提问于2015-06-02得票数 2

1回答

引导-对每个环境的按钮和文本字段进行动态高度调整

、、、

我希望通过以下规则动态更改按钮和文本字段的高度：我知道我可以通过使用和类来完成这个任务。但是，我只想在用户从移动设备访问页面时才使用这些类，而不是总是这样。我也知道，您可以使用显示/隐藏HTML元素，但我需要为所有按钮/文本字段提供一个id，所以我不知道是否可以复制这些元素并将每个元素包装在特定环境中显示的div中，因为具有相同id的两

浏览 3提问于2014-08-08得票数 0

1回答

Highchart注解滚动

、

我必须根据注释文本高度(span)调整注释标签大小(Div)。我通过删除文本的CSS附加了屏幕截图，但它的边框/标签大小重叠。是否有基于内部文本(跨度)动态更新SVG元素高度的选项。

浏览 1提问于2018-08-06得票数 0

2回答

JQuery根据元素高度添加类

、、

我在一个应用程序中有一个包含数据的表，表中的thead元素具有可变的高度，这取决于登录和使用应用程序的用户。所以有时候thead元素的高度很窄，有时候会高很多。请注意，只有两个高度是可能的。我想以某种方式使用jquery来测量thead元素的高度，然后添加一个类，这样它可能会如下所示：<thead class="narrow"><thead class="tall&quo

浏览 0提问于2011-10-19得票数 4

回答已采纳

2回答

根据元素的高度添加类

、、、

我试图根据(.CWproductPreviewDescription p)元素的高度隐藏一个span标记。这是用于截断文本类型函数的。我找到了几个类似的问题和答案，但在我的情况下没有什么能奏效的。出于某种原因，我总是得到第一个匹配的选择器的高度，但我认为使用jQuery选择器会自动遍历所有元素。这是我的代码 jQuery(this).text(text);}); html是

浏览 3提问于2014-01-14得票数 1

回答已采纳

2回答

基于元素高度滚动的jquery添加/删除类？

、、

你好，我使用这个jquery函数在垂直滚动页面上添加一个类。但是我想删除元素末尾的这个类，因为它在所有页面上都有可变的高度。例如，在页面上，这个元素的高度是400px，而在另一个页面上，这个元素的高度是1000px。如何测量元素高度并删除该高度上的类？

浏览 2提问于2013-12-26得票数 1

1回答

我想要实现的是根据它的长度在这个PostContent的段落中动态添加一些内容。我将通过引入上述内容来实现这一点，距离为1.5x视口的高度。我的问题是我不能计算距离。我正在使用https://www.npmjs.com/package/html-react-parser，但我无法使用它访问DOM元素的offsetHeight属性，我想知道该元素与容器元素顶部的距离。假设视区高度为100px，帖子内容为2000p

浏览 26提问于2020-12-19得票数 2

回答已采纳

1回答

svg高度动态变化时如何使用viewbox

、、

其中一个内部div中有一个svg元素。当我调整大小时，问题就开始了。我已经在我的svg中添加了一个viewbox选项来调整大小。

浏览 0提问于2012-07-27得票数 9

回答已采纳

2回答

具有隐藏溢出的jquery-ui可排序连接列表

、、、

我有两个固定的高度div，每个div都包含一个相互连接的可排序列表。有没有办法在保持列表连接的同时隐藏溢出？例如，如果溢出被设置为隐藏，那么当li被拖出div时就不会显示。我知道一个可能的解决方案是计算div可以包含的li的最大数量，并根据可见元素的数量动态添加/删除元素，但我想知道是否有更好的解决方案？

浏览 1提问于2010-07-11得票数 1

2回答

为折叠/动画在div上添加具有持续时间的切换效果。

、、

我想添加一个动画/转换的高度0-自动在一个div。我想在点击时产生切换效果。我已经构建了它，但问题是，我想在开始时显示div的显示，目前我已经隐藏了div，它在点击时切换。

浏览 2提问于2017-11-02得票数 0

回答已采纳

3回答

为什么当我打开一个子菜单页面滚动起来？

、、、

我正在为移动创建一个菜单，当我单击子菜单中的一个项目时，就会出现该菜单。问题是，如果我这样做，当页面被滚动一点，页面滚动回.(无论是打开还是关闭子菜单)。这是代码： .lisottomenu { display: block; border-top: 1px solid #fff; list-style-type: none; widt

浏览 3提问于2016-01-25得票数 0

回答已采纳

1回答

确定片段的onCreateView()中的宽度和高度

、

在我的onCreateView()的Fragment类中，我创建并返回了一个View，它的内容需要根据Fragment的实际屏幕宽度和高度动态创建。如果我能够确定onCreateView()中的宽度和高度，那将是最理想的。这是因为当View是在onCreateView()中构造时，许多子View被添加到它中，以及父布局View如何根据可用的宽度和高度将这些子元素组织成列(以创建一种“流体”列容器)。我试着查看传递给LayoutPara

浏览 2提问于2013-07-27得票数 1

回答已采纳

2回答