gpt4 book ai didi

javascript - 样式选择选项最佳实践

转载 作者:太空宇宙 更新时间:2023-11-04 14:26:42 24 4
gpt4 key购买 nike

我正在处理一个涉及“选择”下拉列表的网页。我的工作是让它“功能化”,即显示正确的内容,同时让它“合理好看”。网页设计师稍后会来完善“外观和感觉”。

令我困惑的是,没有什么好的方法可以仅使用 css 来设置 Html Select 元素的样式。我发现的所有框架/解决方案都涉及以下内容:

  • 隐藏原来的select元素

  • 使用 <div> <span> 的组合或 <ul> <li>模拟原生选择框

  • 插件javascript代码同步隐藏native中的数据选择框和 <div> <span>模拟器。

我必须编写一个 selenium 客户端来测试网页的行为。

如果我编写它来针对 native 选择框进行测试,则使用上面显示的 3 个步骤进一步设置下拉列表样式将破坏测试,因为 selenium 不允许我单击隐藏元素。

如果我现在应用样式,并编写 selenium 客户端来单击模拟 <div><span> ,我也冒着考不上的风险。因为网页设计师可能会在以后选择不同的方式来设置选择框的样式,而我今天要测试的元素可能会从页面中删除。

我想知道以前是否有人有过类似的经验,解决此类问题的最佳做法是什么。

最佳答案

我发现您有两个选择(您偶然发现了)。

native 组件上的样式最少。一些浏览器允许你做一些样式,但主要是选择框的高度和宽度,没有什么太花哨的。这可能是避免出现问题的更好选择,因为它是 native 的并且依赖于浏览器而不是插件。

或者您可以使用一个插件,因为您发现它做了一些奇特的工作来在元素顶部创建一个 div。但是有各种各样的插件,它们之间的里程数各不相同。

在当前元素中,我需要一个自定义选择框。我的脚本所做的是在选择框后面创建一个 div 并将选择框变为不透明度:0。用户认为他们正在单击花哨的 div 但实际上正在点击它前面的选择框(即使它不可见) .当他们单击它时,它会弹出常规选择下拉列表。很酷。最好的部分是它只在页面加载时使用 javascript 来创建 div,其他一切都是 native 控件。如果您需要有关这种操作方式的更多信息,我可以提供一个示例,但这是我在网上找到的。所以也许你也看到了。

关于javascript - 样式选择选项最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19500246/

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