React Native 如何调整代码内elem.Sampling_Method_Code等变量的字体大小
你这段代码是在做纯字符串拼接,字体大小属于样式属性,没法直接在字符串层面修改,需要结合你最终渲染digumMethods的场景处理,常见的解决方案如下:
方案1:渲染到HTML页面(最常见场景)
如果后续你是把digumMethods插入到DOM节点中展示,直接给目标字段包裹带样式的HTML标签即可:
var digumMethods = ''; execDetailData.forEach((elem) => { // 给Sampling_Method_Code套上带内联样式的span标签 const formattedCode = '<span style="font-size: 18px;">' + elem.Sampling_Method_Code + '</span>'; digumMethods = digumMethods + '\n' + formattedCode + '\n' + elem.Parameters_String + '\n' + '__________' + '\n'; });
注意:给DOM节点赋值的时候要用innerHTML属性,不要用innerText/textContent,否则HTML标签会被当成普通文本展示。
如果需要统一样式管理,可以把样式提到CSS类中:
- 先在CSS文件里加样式:
.sampling-method-code { font-size: 18px; /* 还可扩展其他样式,比如字重、颜色 */ font-weight: bold; color: #2c3e50; }
- 拼接字符串的时候使用对应类名:
const formattedCode = '<span class="sampling-method-code">' + elem.Sampling_Method_Code + '</span>';
方案2:输出到浏览器控制台调试
如果你是要在控制台打印时调整这个字段的字体大小,可以用控制台支持的%c格式占位符:
execDetailData.forEach((elem) => { // 第一个%c对应后面第一个样式参数,会应用到后续匹配的内容上 console.log('%c%s\n%s\n__________', 'font-size: 20px', elem.Sampling_Method_Code, elem.Parameters_String); });
方案3:渲染到/等纯文本标签
等纯文本标签 如果你的内容必须放在不支持HTML解析的纯文本容器里,就没法单独调整单个字段的字体大小,只能修改整个容器的font-size属性,所有内容的字体大小会统一变化。
内容的提问来源于stack exchange,提问作者emma
相关产品推荐
相关产品推荐

