CSSStyleDeclaration

# CSSStyleDeclaration

CSSStyleDeclaration表示一个CSS 声明块对象，它是一个 CSS 属性键值对的集合，暴露样式信息和各种与样式相关的方法和属性。

# 方法

# setProperty(name: string | string.cssPropertyString, value?: string): void

对CSS指定样式设置一个新值，如有此样式已存在则更新。

# setProperty 兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	x	4.51	4.51	4.61	-

# 参数

名称

类型

必填

默认值

兼容性

描述

name

string (string.cssPropertyString)

是

CSS样式名称

value

string

否

要设置的新CSS样式值默认值空字符串

# 参见

# getPropertyValue(property: string | string.cssPropertyString): string

获取CSS指定的样式值，如果指定的样式不存在则返回空字符串。

# getPropertyValue 兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	x	4.51	4.51	4.61	-

# 参数

名称

类型

必填

默认值

兼容性

描述

property

string (string.cssPropertyString)

是

要获取的CSS样式名称

# 返回值

类型
string

# App平台

App平台获取样式值与Web平台存在部分差异：

组件通过 class 和 style 设置的 CSS 样式，App平台获取的是 class 和 style 合并计算后的样式，Web平台仅获取 style 属性设置的样式
组件通过 class 和 style 设置的 CSS 简写样式，App平台获取的是拆解（Expansion）后的样式
通过 setProperty 设置的 CSS 简写样式，App平台获取的简写样式，这种情况与Web平台一致

注意

HBuilderX4.51版本调整 getPropertyValue 返回值类型为 string

蒸汽模式（Vapor）
蒸汽模式（Vapor）为了提升 CSS 的性能，App平台将所有样式数据在编译器和运行期都做了类型化转换，丢失了原始字符串数据（即获取值与设置值不完全一致），与非蒸汽模式存在以下差异：

没有设置的样式，获取时将返回默认值。如没有设置 flex-direction 样式时返回值为“column”
简写样式，获取将返回完整的拆解值。如设置 flex 为 1，返回值为“1 1 0%”
获取的颜色数据（如background-color、color、border-color、border-*-color）格式为十六进制颜色八值语法“#RRGGBBAA”，其中 RR、GG、BB、AA分别对应红色、绿色、蓝色、透明值，使用大写字符。如设置 background-color为 "red"，返回值为“#FF0000FF”。特殊值对应的颜色：
- transparent: 对应十六进制颜色八值语法为 #00000000

# 参见

# removeProperty(property: string | string.cssPropertyString): string

删除CSS指定的样式值

# removeProperty 兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	x	4.51	4.51	4.61	x

# 参数

名称

类型

必填

默认值

兼容性

描述

property

string (string.cssPropertyString)

是

要删除的CSS样式名称

# 返回值

类型
string

# 参见

# 示例

<template>
	<button @click="showPop">显示弹层</button>
	<view ref="pop" style="position: absolute; display: none;">
		<text>123</text>
	</view>
</template>
<script lang="uts">
	export default {
		methods: {
			showPop: function () {
				(this.$refs["pop"] as Element).style.setProperty("display","flex")
			}
		}
	}
</script>

示例源码如下，请查看 pre > code 标签中的内容

<template>
	<button @click="showPop">显示弹层</button>
	<view ref="pop" style="position: absolute; display: none;">
		<text>123</text>
	</view>
</template>
<script lang="uts">
	export default {
		methods: {
			showPop: function () {
				(this.$refs["pop"] as Element).style.setProperty("display","flex")
			}
		}
	}
</script>