HarmonyOS 鸿蒙Next：使用鸿蒙组件webview加载网页时，js使用的select标签，webview容器是否支持修改样式及选中状态？

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：使用鸿蒙组件webview加载网页时，js使用的select标签，webview容器是否支持修改样式及选中状态？

使用鸿蒙组件webview加载网页的时候，js使用的select标签，webview容器支持修改样式以及选中状态吗？

Harmonyos Next教程
2 回复

H5文字选中样式可以通过CSS ::selection 伪类选择器自定义。

代码示例:

selection {

  background-color: cyan;

}

#page.ets

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Test2Page {
  controller: web_webview.WebviewController = new web_webview.WebviewController();


  aboutToAppear(){
    // 配置Web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }


  build() {
    Column() {
  Button(‘onconsole message’)
    .onClick(() => {
      this.controller.runJavaScript(document.getElementById(&amp;#<span class="hljs-number">34</span>;test&amp;#<span class="hljs-number">34</span>;).style.color = <span class="hljs-string">'blue'</span>);
    })


  Web({ src: $rawfile(‘Test1.html’), controller: this.controller })
    .javaScriptAccess(true)
}
  }
}

H5

<!DOCTYPE html>
<html>
<body>
<p id=“test” style=“color: red” onclick=“cameraImage()”>sugfjhsgfjdsfcu</p>
</body>
</html>

在HarmonyOS鸿蒙Next系统中，使用鸿蒙组件webview加载网页时，关于js中select标签的样式修改及选中状态的处理，通常情况下，webview容器会基于系统内置的WebView组件进行网页内容的渲染。这意味着，webview会支持标准的HTML、CSS以及JavaScript，包括允许通过JavaScript来修改select标签的样式和选中状态。

具体来说，你可以通过CSS来定义select标签的样式，比如修改背景色、字体大小等，也可以通过JavaScript来动态改变select标签的选中项。例如，使用JavaScript的document.getElementById('yourSelectId').value = 'newValue';来设置选中值，或者使用selectedIndex属性来改变选中项的索引。

然而，需要注意的是，由于不同设备或不同版本的鸿蒙系统可能存在差异，部分高级CSS特性或JavaScript功能可能在不同设备上表现不一致。因此，在开发过程中，建议进行充分的测试以确保兼容性。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部