AI 助理
备案控制台
开发者社区 云计算 文章 正文

uni-app(移动端) 修改(动态修改)根节点html的样式

2022-11-05 977
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uni-app 修改(动态修改)根节点html的样式

uni-app中修改根节点的样式，例如背景颜色、字体大小等样式。由于uni-app不能直接使用@media媒体监听来直接修改html的样式（我这里是需要修改html中的font-size，使用过page，@media都修改失败）。

经过多次尝试后发现uni-app官网推出的page-meta可以修改根节点的属性。具体方法如图5defb6d796b441a39d02358ec420a54f.png
直接在需要修改样式的页面顶部添加，这里的root-font-size是我动态绑定的字体大小（因为需要动态改变根节点样式），可以按照自己的需要来设置样式参数。

也可以看uni-app官网的page-meta介绍。
a47982faf0a3414d919ce147ddcdf10f.png

关键词：
APP移动端
HTML节点
APP样式
APP html
HTML动态
汪汪队出击
目录
相关文章
虫无涯
|
17天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路，而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者，旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择，再到具体模块的封装与实现，包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示，便于理解和实践。
虫无涯
63 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
jsjsjjs
|
15天前
|
数据采集 网络协议 算法
移动端弱网优化专题(十四)：携程APP移动网络优化实践（弱网识别篇）
本文从方案设计、代码开发到技术落地，详尽的分享了携程在移动端弱网识别方面的实践经验，如果你也有类似需求，这篇文章会是一个不错的实操指南。
jsjsjjs
40 1
游客44yag4ft7nckq
|
1月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
24 3
游客44yag4ft7nckq
|
1月前
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
30 3
六卿
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(11)形状节点(ShapeNode)
本文介绍了Twaver HTML5中的形状节点（ShapeNode），它通过一系列点连接成形状来表示物体，支持直线和曲线绘制。文章通过示例代码展示了如何在React组件中创建ShapeNode并设置其形状和样式。
六卿
30 1
Twaver-HTML5基础学习(11)形状节点(ShapeNode)
六卿
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
本文介绍了Twaver HTML5中的HTML节点（HTMLNode），这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点，以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素，以及如何自定义告警显示样式。
六卿
23 1
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
六卿
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素（Element），包括网元（Element）、节点（Node）和连线（Link）的基本概念和使用方法。文章详细解释了Element的属性和方法，并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
六卿
45 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
cqtianxin1
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
cqtianxin1
20 5
cqtianxin1
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
cqtianxin1
28 2
你真的不认识我了
|
2月前
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
你真的不认识我了
343 4

热门文章

最新文章

  • 1
    【83行代码获奖代码】高中生@青藤木子 耗费一周给妈妈编写了一款语音识别APP
  • 2
    3个常用外贸软件及app工具整理
  • 3
    我看TechEd 2012之App时代降临
  • 4
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 5
    App_Code目录中存放不同语言的类文件导致错误的解决方案
  • 6
    15套帮助你展示 App 设计的透视屏幕原型素材
  • 7
    【android 应用】Android（安卓）APP（应用）如何推广？整理
  • 8
    短视频APP源码中系统评论功能是如何实现的
  • 9
    Google App Engine Web开发之java类到网址的映射——实现用java类处理jsp页面的提交
  • 10
    .replace(R.id.container, new User()).commit();/The method replace(int, Fragment) in the type FragmentTransaction is not app
  • 1
    从零开始学习前端开发：HTML基础
    46
  • 2
    React中渲染html结构---dangerouslySetInnerHTML
    57
  • 3
    WWW（URL，HTTP，HTML）
    130
  • 4
    生日快乐祝福HTML源码
    103
  • 5
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    136
  • 6
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    68
  • 7
    好看的html网站维护源码
    237
  • 8
    html+echars图表加日期检索
    55
  • 9
    html+echars的统计报表
    60
  • 10
    【CSDN创作优化1】个人简介优化 html font属性
    59

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 互联网安全-移动APP漏洞风险与解决方案
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 阿里云轻APP - BOAT -帮助企业低成本构建高性能 APP
  • 移动测试智能化 助力高质量App生态体系
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
    • 下一篇
    无影云桌面