js+css控制字体变换

发表于 分类于 评论数： 本文字数： 1.4k 阅读时长 ≈ 3 分钟

好久没写了，小客 跟我说这里会荒废掉。其实本来有很多的打算，只不过话到嘴边又说不出口了。今天正好得个闲暇，写写比较说的清道的明的技术问题吧

今天打开百度知道发现她不知不觉的改版了。在用过 搜搜问问、天涯问吧 之后，感觉 百度知道 的体验一直是这几个当中最舒服的。刚刚正好看到了一个推荐给我的问题，就顺手回答了。(由此可知 百度知道 的推荐问题非常靠谱)

题目如下

有个区间文字，字号为h1，提供一个文本框，用户输入h1-h7，点击按钮后可以改变此区间的字号~

答案如下

很简单，首先制作 h1-h7 字体大小的 css 定义 7 个 class

1
2
3
4
5
6
7
.c_h1{font-size:28px;}
.c_h2{font-size:24px;} 
.c_h3{font-size:20px;} 
.c_h4{font-size:16px;} 
.c_h5{font-size:14px;} 
.c_h6{font-size:12px;} 
.c_h7{font-size:11px;}

容器为 

1
<div class="{c_h1~c_h7之间的某个，一开始可以默认为c_h5}"></div>
然后用js判断填写的字体大小即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function changeSize(){
  c_size = document.getElementById(“text_size”).value
  c_content = document.getElementById(“content”) 
  switch(c_size) { 
    case 'h1': c_content.className='c_h1'
     break 
    case 'h2': c_content.className='c_h2'
     break
    case 'h3': c_content.className='c_h3'
      break
    case 'h4': c_content.className='c_h4'
      break
    case 'h5': c_content.className='c_h5'
      break 
    case 'h6': c_content.className='c_h6'
      break
    case 'h7': c_content.className='c_h7' 
      break
    default: alert('你输入的字体大小有误')
  }
}

最后写两个input，一个用来输入，一个用来触发函数。最终效果可以看这里的demo

回头看看，其实这个例子并没有什么可行性。首先没有必要采用输入字体的方式，只有 7 个大小可以采用选择嘛。其次，代码也不严谨，超过h7或者其他输入的判断没有考虑完全，包括大小写的区分:)当然作为一个基本了解 css、html、js 相互工作的例子还是可以的