KotlinJS中HTML元素style属性的background渐变值设置失败如何解决

问题原因 #

你原有代码不生效的核心原因如下：

• 直接将kotlinext.js.js生成的普通JS对象赋值给attrs.style不符合API规范，style属性对应DOM的CSSStyleDeclaration接口，不支持直接赋值普通JS对象
• 你编写的background属性值末尾多了多余的分号，会导致属性解析失败

正确实现方式 #

方式1：直接赋值style字符串（最简单） #

div("page-header align-items-start min-vh-100") {
    attrs.style = "background: -webkit-linear-gradient(270deg, rgb(84, 83, 97), rgb(25, 34, 99), rgb(49, 70, 180))"
}

方式2：使用Kotlin/JS官方提供的Style DSL（类型安全，更推荐） #

你可以直接使用kotlinx.html内置的style构造器，不需要手动拼接字符串，支持类型检查：

import kotlinx.html.style

div("page-header align-items-start min-vh-100") {
    style {
        background = "-webkit-linear-gradient(270deg, rgb(84, 83, 97), rgb(25, 34, 99), rgb(49, 70, 180))"
        // 如果需要兼容无浏览器前缀的标准属性，可额外加一行配置
        // background = "linear-gradient(270deg, rgb(84, 83, 97), rgb(25, 34, 99), rgb(49, 70, 180))"
    }
}

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