# 窗口样式相关的 API

在web上,宽屏界面会出现topWindow、LeftWindow、RightWindow,相关概念详见宽屏适配指南

本文档列出这些window相关API。

获取对应窗口的样式,返回一个 css 属性值对象; 设置对应窗口的样式,传入一个 css 属性值对象

# uni.getTopWindowStyle()

获取 topWindow 的样式

3.1.0 新增

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x x x x x x

代码示例

uni.getTopWindowStyle()

# uni.getLeftWindowStyle()

获取 leftWindow 的样式

3.1.0 新增

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x x x x x x

代码示例

uni.getLeftWindowStyle()

# uni.getRightWindowStyle()

获取 rightWindow 的样式

3.1.0 新增

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x x x x x x

代码示例

uni.getRightWindowStyle()

# uni.setTopWindowStyle(OBJECT)

设置 topWindow 的样式

3.0.5 新增

OBJECT 参数说明

参数 类型 说明
OBJECT Object css 样式对象,需写驼峰css属性 ,{height: '100px', backgroundColor: 'red'}

代码示例

uni.setTopWindowStyle({
    height: '100px', 
    backgroundColor: 'red'
})

# uni.setLeftWindowStyle(OBJECT)

设置 leftWindow 的样式

3.0.5 新增

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x x x x x x

OBJECT 参数说明

参数 类型 说明
OBJECT Object css 样式对象,需写驼峰css属性 ,{width: '500px', backgroundColor: 'blue'}

代码示例

uni.setLeftWindowStyle({
    width: '500px', 
    backgroundColor: 'blue'
})

# uni.setRightWindowStyle(OBJECT)

设置 rightWindow 的样式

3.0.5 新增

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x x x x x x x x

OBJECT 参数说明

参数 类型 说明
OBJECT Object css 样式对象,需写驼峰css属性 ,{width: '500px', backgroundColor: 'blue'}

代码示例

uni.setRightWindowStyle({
    width: '500px', 
    backgroundColor: 'blue'
})