怎样用CSS控件页面中同时改变所有字体大小

html-css0145

怎样用CSS控件页面中同时改变所有字体大小,第1张

我觉得 CSS 比较难实现,建议用 js 来做.

遍历页面所有div层元素, 设置 fontsize = 当前的fontsize + 1

把以下代码存成 html 文件即可以看到效果.

<script type="text/javascript" language="javascript">

function enlargeFontSize(){

var elements = document.getElementsByTagName("div")

for (var i=0i<elements.lengthi++)

{

var tmp = elements[i].style.fontSize

tmp = Number(tmp.replace("px",""))+1

elements[i].style.fontSize = tmp

}

}

</script>

<input type="button" value="所有文字加一号" onclick="javascript:enlargeFontSize()">

<br />

<div style="font-size:14px">

测试文字1

</div>

<br />

<div style="font-size:18px">

测试文字2

</div>

1、双击打开HBuilder工具，新建一个HTML5静态页面模板。

2、在<body></body>标签内，插入一个div标签，并设置对应的ID属性和内容。

3、在CSS标签内使用ID选择器，设置div标签内的内容文字大小，使用vmin。

4、保存代码并直接打开浏览器预览效果，可以发现使用vmin设置的比同值的px的要大。

5、将css样式属性中的vmin改为vmax，然后保存代码并查看效果即可。