如何在元素占满屏幕宽度时移除其CSS样式属性？

你的容器设置了max-width:500px，当屏幕宽度小于等于500px时，容器会自动占满整个屏幕宽度。要实现此时移除圆角样式，直接用CSS媒体查询就能搞定，完全不需要JavaScript。

修改后的完整代码 #

CSS代码

body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  max-width: 500px;
  background: #aaa;
  color: white;
  border-top-right-radius: 20px;
  box-sizing: border-box;
  padding: 20px;
}

/* 当屏幕宽度≤500px时，容器占满全宽，移除圆角 */
@media (max-width: 500px) {
  .container {
    border-top-right-radius: 0;
  }
}

HTML代码

<div class="container">Test</div>

原理说明 #

媒体查询@media (max-width: 500px)会在视口宽度小于等于500px时触发，此时你的容器因为width:100%和max-width:500px的设置，刚好占满整个屏幕宽度。我们在这里覆盖border-top-right-radius属性为0，就能实现你要的效果。

内容的提问来源于stack exchange，提问作者scader