Question

这是我遇到的问题的一个简单示例，但基本问题仍然存在：<% include partials/header %> <p>Welcome to your personal server!</p> <p>Login!</p> <form method="post" action = "/"> <input placeholder="Username" type="text" name="username"> <input placeholder="Password" type="password" name="password"> <input type="submit" value="Submit"> </form> <% include partials/footer %>元素需要按照JavaScript中第3行的指定进行样式设置，但无法正常工作。我有一些变量和字符串可以在此元素的blue值中连接。 height元素是正确呈现的，但是当我连接这样的值以及如何修复时，为什么蓝色元素不起作用？

red

此行无效。

注意： 我必须在元素的calc值中连接多个变量和值。在保持将多个值串起来的能力的同时，我可以做些什么呢？

＆＃13;

blue.style.height = 'calc( 100% -' + '2rem )';

＆＃13;

var red = document.querySelector( '.red' ),
    green = document.querySelector( '.green' ),
    blue = document.querySelector( '.blue' );

red.style.height = 'calc( 100% - 2rem )';
blue.style.height = 'calc( 100% -' + '2rem )';

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background-color: #f8f8f8;
}
div {
  width: 5rem;
  height: 5rem;
}
.red {
  background-color: #e44;
}
.green {
  background-color: #4d4;
}
.blue {
  background-color: #0dd;
}

＆＃13;

Answer 1

您的连接字符串缺少空格，因此-2rem被解析为负值。

blue.style.height = 'calc( 100% - ' + '2rem )';

设置＆＃39; calc（）＆＃39;通过在JavaScript中加入2个字符串无法正常工作的值

1 个答案: