Question

这是JS小提琴：

我想要的是相反的角度始终为45度，宽度始终为66.6％。因此，高度需要根据宽度动态调整。

我有：

$(window).load(function() {
    var height = document.getElementById(".tri").height();
    var width = document.getElementById(".tri").width();

    document.getElementById(".tri").style.border-top = (width / tan(45));
});

如您所见，我可以使用trig来计算高度，但功能不起作用？！

Answer 1

如果我已经正确地阅读了你的问题，这个小提琴应该是你所追求的：https://jsfiddle.net/qkmzp1jj/

我所做的是：

创建一个获取窗口宽度的新函数（注意：不是元素的宽度）;
计算宽度的2/3;和
然后应用双方的边框宽度。

然后在页面加载的document.(ready)函数中引用此函数，并在调整窗口大小时调用window.(resize)函数（例如移动用户旋转其设备）。

Answer 2

我所做的改变：

jQuery Selectors
使用outerWidth()和outerHeight()代替width()和height()
以jQuery样式更改css
将Math.添加到tan()
将课程更改为ID

width()和height()函数返回0，因为您在CSS中将其设置为0。 outerWidth()和outerHeight()将返回预期值此外，您还必须添加onResize eventHandler以对窗口调整大小做出反应。

$(window).load(function() {
  var height = $("#tri").outerHeight();
  var width = $("#tri").outerWidth();
  $("#tri").css("border-top", (width / Math.tan(45)) + "px solid black");
});

#tri {
  width: 0;
  height: 0;
  border-top: 500px solid black;
  border-right: 500px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tri"></div>

保持CSS三角形角度响应

2 个答案: