<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font: 14px '微软雅黑';}
ul{list-style: none;}
a{text-decoration: none;color: #000;}
.clearfix:after{content: '';display: block;clear:both;}
/* 选择被选中的input
点击事件checked配合单选按钮/复选框
*/
.btn{
width: 25px;
height: 25px;
font-size: 25px;
/* background-color: red; */
}
:checked+section{
font-size: 20px;
}
</style>
</head>
<body>
<!-- 点击 放大缩小文字，
改变图片 锚点/checked
-->
<input class="btn" type="button" value="+" onclick="bigger()">
<input class="btn" type="button" value="-" onclick="smaller()">
<div></div>
<!-- 点击文字 复选框被选中 -->
<!-- 规定 label 绑定到哪个表单元素。 -->
<!-- <input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>
<input type="radio" name="sex" id="male" /><label for="male">Male</label>
<input type="radio" name="sex" id="female" /><label for="female">Female</label> -->
<section id="text">
市场里，经常看见一个乞丐，他坐在轮椅上，腰部以下覆盖一块脏污的毛巾，上半身歪斜，松软地瘫在椅子上，表情哀伤而茫然。
他那哀伤茫然的表情最令人伤痛，因此有许多人布施给他。
今天中午，我穿过市场，看见一个眼熟的人站在西瓜摊旁吃便当，和卖西瓜的人有说有笑。我心里一惊：这个人怎么长得如此面熟，难道会是我的朋友？
</section>
<script>
function bigger(){
// 不起作用
// element.style 读取的只是元素的内联样式(写在元素的 style 属性上的样式)
// var fontSize= document.getElementById('text').style.fontSize
// document.getElementById('text').style.fontSize=fontSize+1;
var text = document.getElementById('text');
//getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
//getPropertyValue获取指定属性的值
var style=window.getComputedStyle(text,null).getPropertyValue('font-size');
// getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
//去掉px
var fontSize=parseFloat(style);
text.style.fontSize=(fontSize+1)+'px';
}
function smaller(){
var text = document.getElementById('text');
var style=window.getComputedStyle(text,null).getPropertyValue('font-size');
var fontSize=parseFloat(style);
text.style.fontSize=(fontSize-1)+'px';
}
</script>
</body>
</html>
浙公网安备 33010602011771号