gpt4 book ai didi

html - 将选项文本旋转 180 度

转载 作者:行者123 更新时间:2023-11-28 00:14:38 28 4
gpt4 key购买 nike

我正在创建一个要在信息亭中显示的网页。由于一些固定问题,显示器必须倒置固定。所以我在页面末尾包含了一个'transform: rotate(180deg) 样式。一切皆好。但是,我的选择元素的下拉框中的选项仍然直接显示。如何使下拉框中的文字也上下颠倒显示。代码的相关部分如下:

<!DOCTYPE html>
<html lang="en">

<head>
<style type="text/css">
option {
background-color: dodgerblue;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
</head>

<body>
<h1>Select Demo</h1>
<select>
<option>Volvo</option>
<option>Toyota</option>
<option>Mercedez</option>
<option>BMW</option>
</select>
</body>
<script type="text/javascript">
document.body.setAttribute( "style", "-webkit-transform: rotate(180deg);");
</script>
</html>

提前致谢

最佳答案

您的代码在 Chrome 中有效。请注意,您正在使用属性 -webkit-transform,因此这只会在 webkit 浏览器上生效。添加额外的 JS 行以针对非 webkit 浏览器:

<script type="text/javascript">
document.body.setAttribute( "style", "-webkit-transform: rotate(180deg);");
document.body.setAttribute( "style", "transform: rotate(180deg);");
</script>

顺便说一句,我不建议以 body 元素为目标,而是在 body 内添加一个包装器 div,将所有内容放入其中,然后使用脚本将包装器作为目标。

另外,检查一下你的 select 当它被颠倒时,下拉菜单仍然显示在正确的方向上。这种方法从一开始就可能存在一些问题。

关于html - 将选项文本旋转 180 度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55187639/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com