小编Tim*_*hin的帖子

我想在现代 Safari/Chrome 浏览器中使用新的 CSS 容器查询。（Safari 16.3、谷歌浏览器 113.0）

但是，基于高度的容器查询并未按预期工作。

预期结果：一旦外部容器变成蓝色（500px 屏幕高度或以下），我预计粉色方块（500px 容器的 50vh）就会变成红色。

当前结果：正方形保持粉红色并且不会变成粉红色。如果实现是相对宽度的，则该示例有效。

我在实现中是否做错了什么，或者只是没有在 Webkit 引擎中实现 jet ？如果在最终产品中用户可以调整容器的大小，还有其他解决方案（不使用 JavaScript）来解决该问题吗？

body {
    margin: 0
}

.container {
    height: 50vh;
    container-type: inline-size;
}

.test {
    width: 250px;
    height: 250px;
    background-color: hotpink;
}
            
@container (max-height: 250px) {
    .test {
        background-color: red;
    }
}
            
@media screen and (max-height: 500px) {
    .container {
        background: blue;
    }
}

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

我正在尝试编写一个JavaScript函数,其中如果第一个下拉列表中的值1(pcount)自动为下拉2(listsname)选择值1,但是如果选择除值1(2,3,4)之外的任何内容我不会想要下拉2除了默认后再做任何事情请选择是否选择值1然后更改为另一个值.我对JavaScript和编程非常陌生,并且未能找到与此类似的任何示例.所以任何帮助都会有帮助!

JavaScript功能:

<script type="text/javascript">
function leaveChange() {
    if (document.getElementById("pcount").value = 1){
        document.getElementById("listedname").value = 1;
    }else
        document.getElementById("listedname").value = 2;

    }
}
</script>

下拉列表1和2:

<select id="pcount" onchange="leaveChange()">
  <option value="" selected="selected">Please Select</option>
  <option value="1">0</option>
  <option value="2">1</option>
  <option value="3">2</option>
  <option value="4">3</option>
</select>

<select id="listedname">
  <option value="" selected="selected">Please Select</option>
  <option value="1">Business Name</option>
  <option value="2">Individual Owner</option>
</select>