js+css控制字体变换

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

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

题目如下

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

答案如下

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

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或者其他输入的判断没有考虑完全,包括大小写的区分:)当然作为一个基本了解 csshtmljs 相互工作的例子还是可以的

觉得这篇文章对你有用?支持一下我的写作