共有 0 条评论

js改变所有子标签文字大小 – 小冉的博客

js改变所有子标签文字大小

js 点击改变文字大小

function fontZoom(size)
{
   document.getElementById('con').style.fontSize=size+'px';
}
<div class="info">文字:【<a href="javascript:fontZoom(16)">大</a>】
                       【<a href="javascript:fontZoom(14)">中</a>】
                       【<a href="javascript:fontZoom(12)">小</a>】</div>

如果父节点(con)下的子节点,已经被赋值,比如

<div id="con">
<p style="font-size: 20px;">小冉博客
<span style="font-size: 10px;">改变文字大小</span><p>

对于这种con父节点下的子节点在无法确定都有什么子节点ID或者name的时候改怎么统一更改所有子节点的文字大小呢?

<script language=javascript>
function fontZoom(size)
{
			var ps=document.getElementById('con').getElementsByTagName('*');
			for(var i=0;i<ps.length;i++){
				ps[i].style.fontSize=size+'px';
			}
		}
  </script>
<div class="info">文字:【<a href="javascript:fontZoom(16)">大</a>】
                       【<a href="javascript:fontZoom(14)">中</a>】
                       【<a href="javascript:fontZoom(12)">小</a>】</div>

这样con父节点下的子节点都获得了size的大小了,实现父节点下文字大小统一了。
那么上面类似的写法有两种,还有没有更好的呢?这里就要说一个children属性,这个就是子属性。

<script>function fontZoom(size)
{
$("div").children("*").css("fontSize", size+'px');
}</script>

添加个按钮

<div class="info">文字:【<a href="javascript:fontZoom(30)">大</a>】
                       【<a href="javascript:fontZoom(20)">中</a>】
                       【<a href="javascript:fontZoom(10)">小</a>】</div>

添加个内容区

<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>

是不是很简单呢? 如果只想更改指定的子节点,把通配符*替换成指定id即可。

  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

5条回应:“js改变所有子标签文字大小”

发表评论

电子邮件地址不会被公开。 必填项已用*标注