jquery CSS媒体查询，如果div的高度大于500px，如何在div下添加阴影？

kx1ctssn 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(128)

所以我有一个包含数据行的div，我们仍然可以添加数据。
然而，由于我有一个max-height和overflow，我还想在底部添加一个阴影，向用户显示他可以向下滚动。
我想“仅”在div的高度达到我的类中定义的max-height时才添加这个阴影。

.container {
  max-height: 546px;
  overflow: auto;

  @media (min-height: 540px) {
    box-shadow: 0px 8px 4px -3px #313335;
  }
}

我以为只要我们添加数据，当高度达到540时，这将简单地添加框阴影，但似乎不是。
不知道我试图实现的是通过jQuery还是仍然适用于css媒体查询，但在一个正确的方式？
我很感激。

jquery

来源：https://stackoverflow.com/questions/61418731/css-media-query-how-can-i-add-a-shadow-under-a-div-if-its-height-is-bigger-tha

3条答案

按热度按时间

cbwuti441#

号
Here是为什么。
不可以，媒体查询的设计初衷不是基于页面中的元素。它们被设计为基于设备或媒体类型工作（因此它们被称为媒体查询）。宽度、高度和其他基于维度的媒体特征都是指基于屏幕的媒体中的视口或设备屏幕的维度。它们不能用于引用页面上的某个元素。
如果您需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察该div元素大小的变化，而不是媒体查询。
-- boltclock
至于你问题的另一部分，是的。
下面是一个片段：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    #tDiv{
        height: 100vh;
        width:300px;
        background-color: green;
    }
</style>
<script>
$(document).ready(function(){
  $(window).resize(function(){
    var height = $("#tDiv").height();
    if(height >= 500){
        $("#tDiv").css('box-shadow', '10px 10px 5px #888');
    }
    else{
        $("#tDiv").css('box-shadow', '10px 10px 5px transparent');   
    }
  });
});
</script>
</head>
<body>
<div id="tDiv">TEST</div>
</body>
</html>

我添加了绿色，以更容易地定义屏幕上的div边界，但. window re-sizing 的函数说明了你可以捕获一个div的高度，并根据它在JQuery中设置的样式属性来执行一个决定。

赞(0）回复(0）举报 2023-10-17

wfypjpf42#

我注意到你对Equinox的回答的评论：
真的很感谢你的回答！澄清了很多事情。现在想知道是否有一些特定的react而不是jQuery。- Ziko 1小时前
是的，有一种更具体的React方式不需要JQuery。

代码解释

使用React状态钩子useState()，你可以创建一个函数来在你的组件中分配一个cssClass prop来切换你的#tDiv元素。
在HTML中，在#tDiv元素上设置className={cssClass}，以便将cssClass属性值作为元素上的类应用。
最后，使用React效果钩子useEffect()在window上添加一个事件侦听器来调用一个函数，该函数将...

比较#tDiv元素的大小
如果height >= 500px将cssClass属性设置为要应用于#tDiv元素的CSS类的名称
如果没有，取消设置cssClass属性以删除应用于#tDiv元素的CSS类

代码示例

CodeSandBox可在这里使用：https://codesandbox.io/s/stackoverflow-61418731-k3tz3
这是组件：

import React from "react";
import "./styles.css";

export default function App() {
  const [cssClass, setCssClass] = React.useState();

  React.useEffect(() => {
    // triggered function when window is resized
    function handleResize() {
      // target the #tDiv element
      const tDiv = document.querySelector("#tDiv");
      // compare the height
      if (tDiv.clientHeight >= 500) {
        // set `cssClass` prop to toggle on #tDiv
        setCssClass("elevated");
      } else {
        // unset `cssClass` prop to remove "elevated" class on #tDiv
        setCssClass(null);
      }
    }

    // add event listener on window.resize
    window.addEventListener("resize", handleResize);

    // remove event listener when component is destroyed
    return _ => window.removeEventListener("resize", handleResize);
  });

  // `cssClass` will reflect the prop value to toggle CSS class
  return (
    <div id="tDiv" className={cssClass}>
      Resize the height of your browser to see me elevate!
    </div>
  );
}

这是应用box-shadow的elevated类的CSS：

.elevated {
  box-shadow: 10px 10px 5px #888;
}

赞(0）回复(0）举报 2023-10-17

des4xlb03#

这是一个只使用CSS的解决方案，它依赖于max()的使用。Firefox还不支持，但很快就会支持。

#tDiv {
  height: 80vh;
  width: 300px;
  margin:0 50px;
  background-color: green;
  position:relative;
}
#tDiv:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:max(0px,calc(500px - 100%));
 box-shadow: 0px 8px 4px -3px #313335;
}

<div id="tDiv">TEST</div>

另一个更支持使用clip-path的想法：

#tDiv {
  height: 80vh;
  width: 300px;
  margin:0 50px;
  background-color: green;
  position:relative;
}
#tDiv:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:0;
 clip-path:polygon(0 0,100% 0,100% calc(200% - 500px),0 calc(200% - 500px));
 box-shadow: 0px 8px 4px -3px #313335;
}

<div id="tDiv">TEST</div>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery CSS媒体查询，如果div的高度大于500px，如何在div下添加阴影？

3条答案

代码解释

代码示例

相关问题

热门标签

最新问答