js怎样动态添加文字样式

js怎样动态添加文字样式,第1张

以改变字体颜色为例

js部分

// 页面加载完毕要执行的 *** 作放到这个函数里

window.onload=function (){

// 使用js实现

document.getElementById('wenzi').style.color="red"

// 使用jqeury实现

$('#wenzi2').css('color','yellow')

}

html部分

<span id="wenzi">js动态添加文字样式示例</span>

<span id="wenzi2">js动态添加文字样式示例2</span>

1、创建一个名称为fontsize的html文件。

2、在body中加入p元素和button按钮。

3、在自定义函数中创建一个字符串

4、用fontsize方法设置字符串的字号为5号。

5、将返回的5号字符串赋值到p元素中。

6、在浏览器中运行该文件点击button查看返回5号字号的字符串。

html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应)

1.新建rem.js文件

(function(doc, win) {

let docEl = doc.documentElement,

    resizeEvt ='orientationchange' in window ?'orientationchange' :'resize',

    recalc =function() {

let clientWidth = docEl.clientWidth

      if ( !clientWidth )return

      if ( clientWidth ===320 ) {

docEl.style.fontSize =24 * (clientWidth /320) +'px'

      }

else {

docEl.style.fontSize =20 * (clientWidth /320) +'px'

      }

}

if ( !doc.addEventListener )return

  win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

2,将文件引入到main.js执行


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11778642.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存