
以改变字体颜色为例
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执行
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)