文章/答案/技术大牛

发布

问jQuery .height()错误
EN

Stack Overflow用户

提问于 2020-05-25 05:42:18

回答 1查看 38关注 0票数 0

我正在尝试倾斜div的边缘，因为页面应该是响应性的，所以需要调整斜率。然而，在我已经归档的所有屏幕尺寸上，角度应该总是相同的。我的问题是，由于某些原因，$('#slope').height()并不总是返回正确的高度，而是在我调整窗口大小或切换选项卡时出现故障。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class="row">
      <div id="block">
        <div id="content">
          Some content<<br>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sint culpa, dolor quaerat autem repellendus, doloremque molestiae, natus ut veritatis eius deserunt mollitia. Eaque ex facilis nobis obcaecati dolorem odio veniam laudantium nemo voluptates voluptas nulla ducimus officia quod maiores corporis hic nisi incidunt aliquid fugiat tenetur at, labore earum. Sapiente perspiciatis, laudantium consectetur sed omnis porro quasi quae. Neque voluptatem, praesentium mollitia ad cumque voluptates ipsa dolores velit beatae odio veniam, voluptatum atque repellat. Minus perferendis, natus accusantium! Sunt architecto provident error commodi. Provident dolorum praesentium quis fuga saepe odio fugiat reiciendis laborum sed at facilis natus facere, dignissimos repellendus. Numquam fugiat consectetur deleniti tempora quibusdam distinctio nulla sequi voluptate inventore voluptas cupiditate eaque soluta neque optio rem vel autem adipisci id fuga sapiente voluptates harum, eius est qui. Asperiores molestiae recusandae cum non sint deserunt nisi aliquid dicta obcaecati ut repellat tenetur laudantium eaque, amet praesentium numquam laboriosam, beatae vitae vel. Tenetur recusandae dicta voluptate aperiam architecto saepe provident odit deleniti possimus consequatur libero voluptas sequi officia minima perspiciatis repellendus voluptates nostrum fugit voluptatem, vero. Minima, tempora vero dicta provident, ducimus nobis quibusdam nam blanditiis eligendi architecto pariatur, enim ut eos reiciendis quisquam aut, eum at porro esse!
        </div>
        <div id="slope">

        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

CSS

.row {
  margin: 0 !important;
}

#block {
  background-color: green;
  width: 50%;
  height: auto;
  min-height: 150px;
  position: relative;
}

#slope {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #fff;
  border-bottom: solid #fff;
  border-left: solid green;
  border-width: 0 0 0 0;
}

$(document).ready(function() {


updateSize();


  $(window).resize(function() {
    updateSize();
  });
});

function updateSize() {
  $('#slope').css('border-width', '0 0 ' + $('#slope').height() + 'px ' + $('#slope').height()/6 + 'px');
}

my Code on JSFiddle

您可以通过调整窗口大小来重现错误。坡度应始终从右上角向下，角度为10°

javascript

jquery

css

bootstrap-4

回答 1

Stack Overflow用户

发布于 2020-05-25 05:59:35

不确定为什么.height会定期返回错误的值，但我建议使用.outerHeight，因为它返回正确的高度。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61992766

复制

相似问题

问jQuery .height()错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery .height()错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery .height()错误
EN