我有一个包含 3 个部分的简单 index.html，使用 JQuery，我怎样才能在 <p> </p> 中制作文本？根据按钮 ZOOM+ 标记放大或缩小和 ZOOM-只有 3 个级别？
这是 index.html :
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script>
$(document).ready(
function ()
{
var text = $('#d3').children('p').text();
$("#d1").click(function() {
$("#d2").show();
});
$("#btn1").click(function() {
});
});
</script>
</head>
<body>
<div id="d1">
En cliquant ici le slide va descendre ou remonter.
</div>
<div id="d2" hidden >
<div id="d3">
<p>HELLO</p>
</div>
<button type="button" id="btn1">ZOOM+</button>
<button type="button" id="btn2">ZOOM-</button>
</div>
</body>
</html>
样式.css:
#d1
{
width: 600px;
background-color: #e5eecc;
border-style: solid;
border: 1px 1px 1px 1px;
padding-left: 40px;
padding-right: 40px;
}
#d2
{
height: 160px;
width: 600px;
background-color: #e5eecc;
border-style: solid;
border: 1px 1px 1px 1px;
padding-left: 40px;
padding-right: 40px;
}
#d3
{
height: 100px;
widows: 200px;
background-color: #98bf21;
position: absolute;
}
#btn1
{
display: inline-block;
margin-left: 140px;
}
最佳答案
一个可能的解决方案是:
var initialSize = "16px";
$(function () {
var text = $('#d3').children('p').text();
var obj = $('p');
var initialSize = parseInt(obj.css('font-size')) + 'px';
$("#d1").click(function () {
$("#d2").show();
});
$("#btn1").click(function () {
var obj = $('p');
var fontSize = parseInt(obj.css('font-size')) + 1;
obj.css('font-size', fontSize + 'px');
});
$("#btn2").click(function () {
var obj = $('p');
var fontSize = parseInt(obj.css('font-size')) - 1;
obj.css('font-size', fontSize + 'px');
});
$("#btn3").click(function () {
$('p').css('font-size', initialSize);
});
});#d1 {
width: 600px;
background-color: #e5eecc;
border-style: solid;
border: 1px 1px 1px 1px;
padding-left: 40px;
padding-right: 40px;
}
#d2 {
height: 160px;
width: 600px;
background-color: #e5eecc;
border-style: solid;
border: 1px 1px 1px 1px;
padding-left: 40px;
padding-right: 40px;
}
#d3 {
height: 100px;
widows: 200px;
background-color: #98bf21;
position: absolute;
}
#btn1 {
display: inline-block;
margin-left: 140px;
}<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div id="d1">
En cliquant ici le slide va descendre ou remonter.
</div>
<div id="d2" hidden>
<div id="d3">
<p>HELLO</p>
</div>
<button type="button" id="btn1">ZOOM+</button>
<button type="button" id="btn2">ZOOM-</button>
<button type="button" id="btn3">ZOOM Reset</button>
</div>关于javascript - 使用 JQuery 动态改变文本大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35119272/